問題描述
我的 HTML 頁面中有一個 DIV 。我根據一些條件顯示這個 DIV 。但 DIV 正在顯示任何指向滑鼠遊標的 HTML 元素。我已嘗試所有的值為 0 – 999999 的 Z-INDEX 屬性。任何人都可以告訴我為什麼會發生這種情況？ CSS 的 Z-INDEX 屬性是否有最小值或最大值？例如，以下 HTML 在 ascx 控制元件中定義：
<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>
CSS 是：
.divClass
{
position: absolute;
left: 25px;
top: 25px;
width: 320px;
height: 300px;
z-index: 1000;
display: none;
}
我正在主頁上使用+ Jquery 顯示和隱藏特定的 DIV for Hyperlink 。
最佳解決方案
http://www.w3.org/TR/CSS21/visuren.html#z-index
‘z-index’
Value: auto | <integer> | inherit
http://www.w3.org/TR/CSS21/syndata.html#numbers
Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits “0” to “9”. A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a “-” or “+” to indicate the sign. -0 is equivalent to 0 and is not a negative number.
Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value.
所以基本上對 CSS 標準中的 z-index 值沒有任何限制，但是我猜想大多數瀏覽器在實踐中將其限制為 32 位值 (-2147483648 到+2147483647)(64 位將是頂部的一點，有意義的是，使用這些天數少於 32 位的東西)
次佳解決方案
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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 │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
第三種解決方案
我的測試顯示，z-index: 2147483647 是最大值，在 OS X.1.1 上測試了 OS X. 我發現了一個整數溢位錯誤：如果你鍵入 z-index: 2147483648(這是 2147483647 + 1)，元素就會落後於所有其他元素。至少瀏覽器不會崩潰。
要學習的是，您應該注意為 z-index 屬性輸入太大的值，因為它們環繞。
第四種方案
這取決於瀏覽器 (儘管所有瀏覽器的最新版本應該最大為 2147483638)，瀏覽器的反應超出最大值時也是如此。
http://www.puidokas.com/max-z-index/
第五種方案
沒有經驗，我認為正確的最大 z-index 是 2147483638 。
第六種方案
它是 32 位整數的最大值：2147483647
另請參閱檔案：https://www.w3.org/TR/CSS22/visuren.html#z-index(允許負數)
第七種方案
Z-index 的最小值為 0; 最大值取決於瀏覽器型別。
第八種方案
Z-Index 僅適用於應用了 position: relative; 或 position: absolute; 的元素。如果這不是問題，我們需要看到一個示例頁面更有幫助。
編輯：好醫生已經做出了最充分的解釋，但是快速版本是最小值是 0，因為它不能是負數，最大限度是 – 對於大多數設計，你永遠不需要超過 10 。
第九種方案
我發現，如果 z-index 不工作，那麼它的父/兄弟姐妹沒有指定的 z-index 。
所以如果你有：
<div id="1">
<a id="2" style="z-index:2"></a>
<div id="3" style="z-index:1"></div>
<button id="4"></button>
</div>
專案＃3 或甚至＃4 可能會對點選/懸停空間進行競爭＃2，但是如果將＃1 設定為 z-index 0，那麼 z-index 的兄弟姐妹現在將它們放在獨立的堆疊中，這些堆疊中的 z-index 正確。
這有一個有用的和相當人性化的描述：http://foohack.com/2007/10/top-5-css-mistakes/
第十種方案
上面的使用者說，「對於大多數設計，你永遠不會需要超過 10」 。
根據您的專案，您可能只需要 z-indexes 0-1 或 z-indexes 0-10000 。你經常需要玩更高的數字… 特別是如果你正在使用燈箱觀眾 (9999 似乎是標準的，如果你想要頂部他們的 z-index，你將需要超越！)
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。