Skip to content

Instantly share code, notes, and snippets.

@jcdarwin
Last active November 30, 2016 11:08
Show Gist options
  • Save jcdarwin/73c1be45dc63bf164917 to your computer and use it in GitHub Desktop.
Save jcdarwin/73c1be45dc63bf164917 to your computer and use it in GitHub Desktop.
Ensure that a given element always has the highest z-index
(function(){
// To see the elements with the highest z-index on a page
var highestZindex = 0;
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]);
}
};
var elements = [];
forEach(document.querySelectorAll('*'), function (index, element) {
zindex = getComputedStyle(element).getPropertyValue("z-index")
if (['auto', 0].indexOf(zindex) === -1 && parseInt(zindex, 10) >= highestZindex) {
elements.push({zindex: parseInt(zindex, 10), element: element})
highestZindex = parseInt(zindex, 10)
}
});
elements.forEach(function(item){
if (item.zindex === highestZindex) {
console.log(item.element)
console.log('zindex: ', item.zindex)
}
})
}())
// ensure that elements on the page do not have a
// z-index higher than a given element.
//var highestZindex = 0;
//$('body').('*').each(function(index, el){
// highestZindex = $(el).css('z-index') || highestZindex;
//});
$('.our-element-that-should-always-be-on-top').css({'z-index': highestZindex + 1})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment