CSS/JavaScript: Make element top-most z-index/top-most modal element

Question

I would like to make an element (e.g. a <div>) be the top-most layer on the page.

My assumption is that the only way I can do this is to specify that the element has a style="z-index:" value that is the maximum the browser allows (int32?).

Is this correct?

Instead, would it be possible to somehow get the element's z-index whose is highest, and make this <div>'s z-index the [highest element's value] + 1? For example:

$myDiv.css("z-index", $(document.body).highestZIndex() + 1);

How do modal JavaScript "windows" work?

Answer 1

Here's how to do it :

var elements = document.getElementsByTagName("*");
var highest_index = 0;

for (var i = 0; i < elements.length - 1; i++) {
    if (parseInt(elements[i].style.zIndex) > highest_index) {
        highest_index = parseInt(elements[i].style.zIndex;
    }
}

highest_index now contains the highest z-index on the page... just add 1 to that value and apply it wherever you want. You can apply it like so :

your_element.style.zIndex = highest_index + 1;

Here's another way of achieving the same thing using jQuery :

var highest_index = 0;

$("[z-index]").each(function() {
    if ($(this).attr("z-index") > highest_index) {
         highest_index = $(this).attr("z-index");
    }
});

Again, same way to apply the new index to an element :

$("your_element").attr("z-index", highest_index + 1);

Answer 2

What about stacking context? It is not always true that: On a document highest z-index will be on top. See: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/. If you do not take stacking context into account, setting a billion may not be enough to make your element on the top-most.

Answer 3

http://abcoder.com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/ -> find the max z-index and assign +1 to it.

Answer 4

Sheavi's jQuery solution doesn't work because z-index is a css style, not an attribute.

Try this instead:

raiseToHighestZindex = function(elem) {
    var highest_index = 0;
    $("*").each(function() {
        var cur_zindex= $(this).css("z-index");
        if (cur_zindex > highest_index) {
            highest_index = cur_zindex;
            $(elem).css("z-index", cur_zindex + 1);
        }
    });
    return highest_index;
}; 

Return value may not be what you expect due to Javascript's async nature, but calling the function on any element will work fine.