Minimalna i maksymalna wartość indeksu Z?

518

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 .divClasspomocą onclick za <asp:hyperlink>pomocą jQuery.

Sachin Gaur
źródło
Problem prawdopodobnie nie dotyczy konkretnie Z-index. Czy możesz podać przykład HTML i CSS ilustrujący zachowanie? W jakich przeglądarkach tego doświadczasz?
roryf
Z ciekawości możesz wypróbować to samo bez korzystania ze stołu, tylko trochę treści, linku i div. Również umieść kolor tła na div, aby mieć pewność, że się rozwijasz.
roborourke
60
msgstr "wypróbowałem całą wartość właściwości Z-INDEX od 0 - 999999". Trudno mi w to uwierzyć.
sampathsris,
4
@Krumia Nie wiem, mógł wypróbować wszystkie wartości indeksu Z pomiędzy 0-999999 z JS ... Po prostu opcja ...
FullyHumanProgrammer
4
Nikt tak naprawdę nie wspomniał o tym display: nonew swoim CSS?
Mark Baijens,

Odpowiedzi:

386
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ Browser              │ Max z─index value │ When exceeded, value changes to: │
╞══════════════════════╪═══════════════════╪══════════════════════════════════╡
│ Firefox 0 - 2        │ 2147483647        │ element disappears               │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 3            │ 2147483647        │ 0                                │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 4+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 0 - 3         │ 16777271          │ 16777271                         │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 4+            │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Internet Explorer 6+ │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Chrome 29+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Opera 9+             │ 2147483647        │ 2147483647                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
Behnam Mohammadi
źródło
4
Uważam, że ma na myśli negatywne.
Gavin,
41
Jak do tego doszło?
2540625,
Jakieś numery na mobilne Safari / Chrome / Firefox?
2540625,
30
Dla zainteresowanych 2,147,483,647 = 2^31 - 1. To liczba pierwsza Mersenne.
Reggie Pinkham,
2
@BehnamMohammadi, jakie powinno być standardowe zachowanie?
Pacerier
306

http://www.w3.org/TR/CSS21/visuren.html#z-index

„indeks z”

Wartość : auto | <integer> | dziedziczyć

http://www.w3.org/TR/CSS21/syndata.html#numbers

Niektóre typy wartości mogą mieć wartości całkowite (oznaczone przez <integer>) lub wartości liczb rzeczywistych (oznaczone przez <numer>). Liczby rzeczywiste i liczby całkowite są określone tylko w notacji dziesiętnej. <integer> składa się z jednej lub więcej cyfr od „0” do „9”. <numer> może być <integer> lub może być zerem lub więcej cyfr, po których następuje kropka (.), Po której następuje jedna lub więcej cyfr. Zarówno liczby całkowite, jak i liczby rzeczywiste mogą być poprzedzone znakiem „-” lub „+”, aby wskazać znak. -0 jest równe 0 i nie jest liczbą ujemną.

Zauważ, że wiele właściwości, które dopuszczają liczbę całkowitą lub rzeczywistą jako wartość, faktycznie ogranicza wartość do pewnego zakresu, często do wartości nieujemnej.

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)

Tamas Czinege
źródło
17
Ważne jest, aby pamiętać, że maksymalna wartość indeksu Z w Safari 3 wynosiła 16777271. Zostało to podniesione do 32-bitowego standardu w Safari 4, więc jest to tylko problem, jeśli celujesz w starsze przeglądarki. Również nawet w Safari 3 cokolwiek powyżej 16777271 jest ograniczone, więc jeśli nie używasz absurdalnie dużych wartości indeksu Z do zamawiania wielu elementów, nie powinieneś mieć problemu (tj. Ustawienie jednego elementu na wartość indeksu Z 2147483647 upewni się, że element pozostanie na samej górze w dowolnej przeglądarce, chyba że konkuruje z innym elementem, który ma również indeks Z> 16777271).
Doktor J
6
@DoktorJ Czy ktoś wie, dlaczego to 16777271? Dziwne wydaje się, że jest to 56 więcej niż limit 24-bitowej liczby całkowitej bez znaku.
Jools
2
@Jools według dewelopera Webkita Erica Seidela , był to wynik zastosowania 24-bitowego pola bitowego -log base 2 (lg) = lg(16777271)
Janosch
2
@Janosch Przepraszamy, nie rozumiem. lg (16777271) jest większy niż 24. Myślałbym, że 24-bitowe pole bitowe nie jest wystarczająco duże.
Jools,
@Janosch, 2 ^ 24 = 16777216. 16777271będzie zatem wymagać 25 bitów.
Pacerier
157

Moje testy pokazują, że z-index: 2147483647jest 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-indexwłaściwości, ponieważ się zawijają.

Biegł
źródło
57
Ponieważ to (2147483647) jest największą wartością dodatnią liczby całkowitej ze znakiem w 32-bitowych systemach operacyjnych ...
Badr Hari
4
Nie sądzę, że liczba będzie owinąć wokół jeśli wartość wynosi ponad 2147483647 ... Myślę, że to jest bardziej prawdopodobne, że będzie po prostu traktować przeglądarek dowolną liczbę ponad tę wartość jako wartość stałą, np 0.
Oliver-Clare
3
Może twoja wartość stała się ujemna ... Na przykład -2147483647
Wahyu Fahmy
3
W nowoczesnych przeglądarkach ponad 2147483648 nie przenosi elementów za inne elementy
Zach Saucier
25

Minimalna wartość indeksu Z wynosi 0 ; maksymalna wartość zależy od typu przeglądarki.

wprowadź opis zdjęcia tutaj

Santosh Khalse
źródło
4
W rzeczywistości indeks Z może być liczbą ujemną. Pozycjonowane elementy z ujemnymi indeksami Z są uporządkowane najpierw w kontekście stosu, więc pojawią się za wszystkimi innymi elementami. Zobacz także dokumenty: w3.org/TR/CSS22/visuren.html#z-index
magikMaker
17
Łatwe do skopiowania i
wklejenia
Indeks Z może być liczbą ujemną, ale na przykład Safari na iOS 11.0.2 ma problem z tą właściwością.
kris_IV
Santosh, skąd masz te liczby? Czy skopiowałeś odpowiedź Behnam i dodałeś IE7 i IE8?
CPHPython
21

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/

pdr
źródło
21

Z doświadczenia uważam, że poprawne maksimum z-indexto 2147483638.

Mohammad
źródło
7
Wygląda na to, że się mylisz. Według testów przeprowadzonych w 2009 roku przez Erica Poidokasa, maksymalna wartość indeksu Z (bez ryzyka upuszczenia elementów w wyniku przepełnienia) wynosi 2147483647.
Martin
14

Z-Index działa tylko dla elementów, które mają position: relative;lub position: 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.

roborourke
źródło
5
Użyłem „z-index: -1;” przed „zatopieniem” elementu, aby nie można go było kliknąć. Prawdopodobnie nie jest to popularne rozwiązanie, ale działa. : P
Ty.
17
Wiem, że to trochę za późno, ale działa z pozycją: również naprawioną.
TCCV
7
AFAIK, możesz mieć ujemne liczby całkowite dla wartości indeksu Z.
d -_- b
Zastanawiam się, dlaczego określam Z-index: 1000, ale przeglądarka powiedziała mi, że faktyczny Z-index to auto. pozycja załatwia sprawę.
Czy Wu
6

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:

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

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/  

kcar
źródło
4
Podczas gdy jesteśmy na ten temat, kolejnym powszechnym problemem jest brak position: relative;lub coś podobnego.
Ryan Taylor
1
W rzeczywistości po prostu ponownie przeczytaj oryginalny post. Masz rację, to prawdopodobnie jego problem.
Ryan Taylor
5

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ć!)

Skalisty
źródło
0

Chociaż INT_MAXjest 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_MAXnp. 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…).

Creshal
źródło