Nilai minimum dan maksimum indeks-z?

Saya memiliki div di halaman HTML saya. Saya menunjukkan div ini berdasarkan pada beberapa kondisi, tetapi div tersebut ditampilkan di belakang elemen HTML di mana saya mengarahkan kursor mouse.

Saya telah mencoba semua nilai untuk z-index dari 0 - 999999. Adakah yang bisa memberitahu saya mengapa ini terjadi?

Apakah ada nilai minimum atau maksimum properti Z-INDEX dari 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>

Saya menunjukkan dan menyembunyikan div dengan .divClassonclick <asp:hyperlink>menggunakan 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'

Nilai : otomatis | <integer> | mewarisi

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

Beberapa tipe nilai mungkin memiliki nilai integer (dilambangkan dengan <integer>) atau nilai-nilai bilangan real (dilambangkan dengan <nomor>). Bilangan dan bilangan real ditentukan hanya dalam notasi desimal. <integer> terdiri dari satu atau lebih digit "0" hingga "9". <number> dapat berupa <integer>, atau bisa nol atau lebih digit diikuti oleh titik (.) Diikuti oleh satu atau lebih digit. Bilangan bulat dan bilangan real dapat didahului oleh "-" atau "+" untuk menunjukkan tanda. -0 sama dengan 0 dan bukan angka negatif.

Perhatikan bahwa banyak properti yang memungkinkan bilangan bulat atau bilangan real sebagai nilai sebenarnya membatasi nilai untuk beberapa rentang, seringkali ke nilai non-negatif.

Jadi pada dasarnya tidak ada batasan untuk nilai indeks-z dalam standar CSS, tapi saya kira sebagian besar browser membatasi untuk menandatangani nilai 32-bit (−2147483648 hingga +2147483647) dalam praktiknya (64 akan sedikit di atas, dan itu tidak masuk akal untuk menggunakan sesuatu yang kurang dari 32 bit hari ini)

Tes saya menunjukkan bahwa itu z-index: 2147483647adalah nilai maksimum, diuji pada FF 3.0.1 untuk OS X. Saya menemukan bug integer overflow: jika Anda mengetik z-index: 2147483648(yaitu 2147483647 +1) elemen hanya berjalan di belakang semua elemen lainnya. Setidaknya peramban tidak mogok.

Dan pelajaran yang harus dipetik adalah Anda harus berhati-hati memasukkan nilai yang terlalu besar untuk z-indexproperti karena mereka membungkus.

Nilai minimum Z-index adalah 0 ; nilai maksimum tergantung pada jenis browser.

Itu tergantung pada browser (meskipun versi terbaru dari semua browser harus maks. Di 2147483638), seperti halnya reaksi browser ketika maksimum terlampaui.

http://www.puidokas.com/max-z-index/

Ini nilai maksimum integer 32 bit: 2147483647

Lihat juga dokumen: https://www.w3.org/TR/CSS22/visuren.html#z-index (angka negatif diperbolehkan)

Dari pengalaman, saya pikir maksimum yang benar z-indexadalah 2147483638.

Indeks-Z hanya berfungsi untuk elemen yang memiliki position: relative;atau position: absolute;menerapkannya. Jika bukan itu masalahnya, kita perlu melihat halaman contoh untuk lebih membantu.

EDIT: Dokter yang baik telah memberikan penjelasan sepenuhnya tetapi versi cepatnya adalah bahwa minimum adalah 0 karena itu tidak bisa menjadi angka negatif dan maksimum - yah, Anda tidak akan pernah benar-benar perlu pergi di atas 10 untuk sebagian besar desain.

Saya telah menemukan bahwa sering jika indeks-z tidak berfungsi karena induk / saudara kandungnya tidak memiliki indeks-z yang ditentukan.

Jadi, jika Anda memiliki:

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

item # 3, atau bahkan # 4, mungkin memperebutkan # 2 untuk ruang klik / arahkan, meskipun jika Anda menetapkan # 1 ke z-indeks 0, saudara kandung yang z-index menempatkan mereka di tumpukan independen sekarang berada di tumpukan yang sama dan akan z-indeks dengan benar.

Ini memiliki deskripsi yang bermanfaat dan cukup manusiawi: http://foohack.com/2007/10/top-5-css-mistakes/  

Seorang pengguna di atas mengatakan "baik, Anda tidak akan pernah benar-benar perlu pergi di atas 10 untuk sebagian besar desain."

Bergantung pada proyek Anda, Anda hanya perlu z-indeks 0-1, atau z-indeks 0-10000. Anda sering harus bermain dalam angka yang lebih tinggi ... terutama jika Anda bekerja dengan pemirsa lightbox (9999 tampaknya menjadi standar dan jika Anda ingin melampaui indeks-z mereka, Anda harus melebihi itu!)

Meskipun INT_MAXmungkin merupakan taruhan yang paling aman, WebKit tampaknya menggunakan ganda secara internal dan dengan demikian memungkinkan angka yang sangat besar (dengan presisi tertentu).LLONG_MAXmis. berfungsi dengan baik (setidaknya dalam 64-Bit Chromium dan WebkitGTK), tetapi akan dibulatkan menjadi 9223372036854776000.

(Meskipun Anda harus mempertimbangkan dengan hati-hati apakah Anda benar- benar membutuhkan banyak indeks z ini ...).