CSS/JavaScript: Utwórz najbardziej wysunięty element z-index/top-most modowy

Question

Chciałbym, aby element (np. <div>) był najwyższą warstwą na stronie.

Moje założenie jest takie, że jedynym sposobem, w jaki mogę to zrobić, jest określenie, że element ma wartość style="z-index:", która jest maksymalna dozwolona przez przeglądarkę (int32?).

Czy to prawda?

Zamiast tego, to byłoby możliwe, aby jakoś to element na z-index którego najwyższy, i uczynić tę <div> „s z-index[highest element's value] + 1? Na przykład:

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

Jak działają modalne "okna" JavaScript?

Answer 1

http://abcoder.com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/ -> znajdź maksymalny indeks z i przypisz mu +1.

Answer 2

Oto jak to zrobić:

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 zawiera obecnie najwyższy z-index na stronie ... po prostu dodać 1 do tej wartości i stosować go wszędzie tam, gdzie chcesz. Można stosować go tak:

your_element.style.zIndex = highest_index + 1; 

Oto kolejny sposób na osiągnięcie tego samego przy użyciu jQuery:

var highest_index = 0; 

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

Znowu ten sam sposób zastosować nowy indeks elementu:

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

Answer 3

Rozwiązanie jQuery Sheaviego nie działa, ponieważ z-index jest stylem css, a nie atrybutem.

Spróbuj to zamiast:

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

Zwracana wartość nie może być to, czego można się spodziewać ze względu na charakter asynchroniczny obsługa JavaScript, ale wywołanie funkcji na dowolnym elemencie będzie działać dobrze.

Answer 4

Co z kontekstem stosowym? Jest zawsze prawdziwe, że: Na dokumencie najwyższy indeks Z będzie na wierzchu. Patrz: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/. Jeśli nie bierzesz pod uwagę kontekstu stosu, ustawienie miliarda może nie wystarczyć, aby Twój element był najwyższy.