奇怪的z-index行為阻止鼠標交互：bug還是正常？

Question

每當我嘗試在網頁中使用z-index來改變堆疊重疊div的順序時，我似乎遇到了一個問題，即被迫降低的div對鼠標事件沒有反應。

在我目前的情況下，我有：

<div class="leftcolumn">
<div class="leftbar"></div> <!-- a 95px wide bar on the left -->
...
<h3>header</h3> <!-- a little header sitting inside the leftbar
...
</div>

默認情況下，h3沒有顯示 - 它隱藏在左側欄后面。 如果我添加z-index：5; 到了H3，它仍然沒有顯示出來。

所以我在左欄添加了z-index：-1。 現在它隱藏在左欄后面 - 但至少h3顯示。

所以我在左欄添加了z-index：-2。 現在一切看起來都正確 - 但你不能點擊左欄內的任何東西。 鼠標光標不會從箭頭改變。

我在Chrome和Firefox中都得到了這種確切的行為。 IE7根本不顯示左欄，但至少可以點擊。

那么，我是否誤解了z-index，或者這里的FF和Chrome都存在錯誤？ z-index可以有效地用於這種東西，還是我必須找到另一種方式？

（我可以更改HTML，但越少越好。）

Answer 1

好吧，10秒后，我發現只使用正面的z-index'會使問題消失。 也許負面的z-index意味着對象低於鼠標光標在理論上生活的水平？

Answer 2

你知道嗎？為了使z-index正常工作，你需要定位你的元素，即使它們只是position: relative （它不會改變它們的位置，但允許你使用z-index）。 這樣，你應該能夠給leftbar的位置，例如2 ，你的h3的位置，比方說3 。 你的h3應該是最重要的。

您可以使用任何位置類型，只要您有一個。

回顧：

#leftcolumn { position: absolute; z-index: 1; }

#leftbar { position: relative; z-index: 2; }

h3 { position: relative; z-index: 3; }

Answer 3

即使左欄內容可見，左欄div現在也位於其上方，可能具有透明背景。 理想情況下，您可能希望修改HTML以使H3位於左側欄中，但如果這不是一個選項，您可能需要將z-index應用於左列中的特定元素，以便將它們拉到左側欄中的元素之上。