CSS / JavaScript: сделать элемент самым верхним z-index / самым верхним модальным элементом

Question

Я хотел бы сделать элемент (например, <div>) самым верхним слоем на странице.

Я предполагаю, что единственный способ сделать это - указать, что элементимеет значение style="z-index:", которое является максимальным разрешением браузера (int32?).

Это правильно?

Вместо этого можно было бы как-то получить элемент z-index, чейсамый высокий, и сделать это <div> z-index [highest element's value] + 1?Например:

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

Как работают модальные «окна» JavaScript?

Answer 1

Вот как это сделать:

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;
    }
}

наибольший индекс теперь содержит самый высокий z-индекс на странице ... просто добавьте 1 к этому значению и примените его где угодно Вы можете применить это так:

your_element.style.zIndex = highest_index + 1;

Вот еще один способ добиться того же, используя jQuery:

var highest_index = 0;

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

Опять, таким же образом, чтобы применить новый индекс к элементу:

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

Answer 2

А как насчет контекста?Это не всегда верно, что: В документе самый высокий z-индекс будет сверху.См .: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/. Если вы не учитываете стековый контекст, установка миллиарда может оказаться недостаточной для того, чтобы ваш элемент оказался самым верхним.

Answer 3

Решение jQuery от Sheavi не работает, потому что z-index - это стиль CSS, а не атрибут.

Попробуйте вместо этого:

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;
}; 

Возвращаемое значение может не соответствовать ожидаемому из-за асинхронной природы Javascript, но вызов функции для любого элемента будет работать нормально.

Answer 4

http://abcoder.com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/ -> найти максимальный z-индекс и присвоить ему +1.