Mam div na mojej stronie HTML. Pokazuję div na podstawie pewnych warunków, ale div wyświetla się za elementem HTML, w którym wskazałem kursorem myszy.
Próbowałem wszystkich wartości indeksu Z od 0 do 999999. Czy ktoś może mi powiedzieć, dlaczego tak się dzieje?
Czy jest jakaś minimalna lub maksymalna wartość właściwości Z-INDEX CSS?
.divClass {
position: absolute;
left: 25px;
top: 25px;
width: 320px;
height: 300px;
z-index: 1000;
}
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
</td>
</tr>
<tr>
<td>
<div class="divClass">
Some Data
</div>
</td>
</tr>
</table>
Pokazuję i chowam div za .divClass
pomocą onclick za <asp:hyperlink>
pomocą jQuery.
display: none
w swoim CSS?Odpowiedzi:
źródło
2,147,483,647 = 2^31 - 1
. To liczba pierwsza Mersenne.http://www.w3.org/TR/CSS21/visuren.html#z-index
http://www.w3.org/TR/CSS21/syndata.html#numbers
Zasadniczo więc nie ma ograniczeń dla wartości indeksu Z w standardzie CSS, ale wydaje mi się, że większość przeglądarek ogranicza go do podpisanych wartości 32-bitowych (−2147483648 do +2147483647) w praktyce (64 byłoby trochę z góry, a to obecnie nie ma sensu używać niczego mniejszego niż 32 bity)
źródło
log base 2 (lg) = lg(16777271)
16777216
.16777271
będzie zatem wymagać 25 bitów.Moje testy pokazują, że
z-index: 2147483647
jest to maksymalna wartość, przetestowana na FF 3.0.1 dla OS X. Odkryłem błąd przepełnienia liczb całkowitych: jeśli wpiszeszz-index: 2147483648
(2147483647 + 1), element ten pozostanie w tyle za wszystkimi innymi elementami. Przynajmniej przeglądarka nie ulega awarii.Lekcja do nauczenia jest taka, że powinieneś wystrzegać się wprowadzania zbyt dużych wartości dla
z-index
właściwości, ponieważ się zawijają.źródło
Minimalna wartość indeksu Z wynosi 0 ; maksymalna wartość zależy od typu przeglądarki.
źródło
Zależy to od przeglądarki (chociaż najnowsza wersja wszystkich przeglądarek powinna mieć maksymalny limit 2147483638), podobnie jak reakcja przeglądarki, gdy wartość maksymalna zostanie przekroczona.
http://www.puidokas.com/max-z-index/
źródło
Jest to maksymalna wartość 32-bitowej liczby całkowitej: 2147483647
Zobacz także dokumenty: https://www.w3.org/TR/CSS22/visuren.html#z-index (liczby ujemne są dozwolone)
źródło
Z doświadczenia uważam, że poprawne maksimum
z-index
to 2147483638.źródło
Z-Index działa tylko dla elementów, które mają
position: relative;
lubposition: absolute;
stosowanych do nich. Jeśli to nie jest problem, będziemy musieli zobaczyć przykładową stronę, aby być bardziej pomocnym.EDYCJA: Dobry lekarz przedstawił już najdokładniejsze wyjaśnienie, ale szybka wersja mówi, że minimum to 0, ponieważ nie może to być liczba ujemna, a maksimum - cóż, tak naprawdę nigdy nie będziesz musiał przekraczać 10 dla większości projektów.
źródło
Przekonałem się, że często, jeśli indeks Z nie działa, ponieważ jego rodzic / rodzeństwo nie ma określonego indeksu Z.
Więc jeśli masz:
pozycja # 3, a nawet # 4, może konkurować # 2 o miejsce na kliknięcie / najechanie, chociaż jeśli ustawisz # 1 na Z-index 0, rodzeństwo, które z-index umieści je w niezależnych stosach, będzie teraz na tym samym stosie i będzie poprawnie indeksować.
Ma to pomocny i dość humanizowany opis: http://foohack.com/2007/10/top-5-css-mistakes/
źródło
position: relative;
lub coś podobnego.Użytkownik powyżej mówi „cóż, tak naprawdę nigdy nie będziesz musiał przekraczać 10 dla większości projektów”.
W zależności od projektu możesz potrzebować tylko indeksów Z 0-1 lub indeksów Z 0-10000. Często będziesz musiał grać wyższymi cyframi ... szczególnie, jeśli pracujesz z przeglądarkami lightbox (9999 wydaje się być standardem i jeśli chcesz zwiększyć indeks Z, musisz go przekroczyć!)
źródło
Chociaż
INT_MAX
jest to prawdopodobnie najbezpieczniejszy zakład, WebKit najwyraźniej używa podwójnie wewnętrznie, a zatem pozwala na bardzo duże liczby (z pewną precyzją).LLONG_MAX
np. działa dobrze (przynajmniej w 64-bitowym Chromium i WebkitGTK), ale zostanie zaokrąglony do 9223372036854776000.(Chociaż powinieneś dokładnie rozważyć, czy naprawdę potrzebujesz tak wielu indeksów Z…).
źródło