Ensure that a given element always has the highest z-index

zindex-highest

(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})