Minimalna i maksymalna wartość indeksu Z?

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.

┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘

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)

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ą.

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

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/

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)

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

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.

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/  

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

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…).