Z-index不適用於多個絕對定位元素

我有一個相當簡單的交互式地圖與一堆「引腳」，在懸停時顯示相應的「標籤」。Z-index不適用於多個絕對定位元素

CSS（不相關性略）：

#map { position: relative; } 
.map-pin { display: block; position: absolute; } 
.map-tag { float: left; left: 20px; opacity: 0; pointer-events: none; position: absolute; } 
.map-pin:hover .map-tag { opacity: 1; pointer-events: all; }

HTML（只包括了明顯的原因之一針格）：

<div id="map"> 

    <div id="map-pin-1" class="map-pin"> 
     <div class="map-tag"></div> 
    </div> 

</div>

的問題是標籤，儘管給他們任何足夠高z-index值，不會出現在所有其他引腳之上。看起來他們只會出現在DOM中特定標籤上方的引腳之上。例如，#map-pin-3 .map-tag將出現在#map-pin-1和#map-pin-2之上，但#map-pin-4將出現在標籤上方。

有什麼建議嗎？

來源

2012-09-13 Bobe

我意識到其他引腳出現在標籤上方的原因是因爲.map-pin div的高度和寬度設置爲20px。這樣做是爲了防止大的div阻止其他引腳懸空。我在'.map-pin'裏面直接插入了一個錨點作爲'.map-tag'的兄弟，並將其設置爲20x20（並且將'.map-pin'設置爲auto），所以當標籤出現在.map-pin一個'被盤旋，而不是整個div。如果我增加div尺寸，它會覆蓋其他引腳，但會阻止它們懸停。如果我減少它，它允許引腳懸停，但引腳出現在div上方。 – Bobe

首先，在代碼示例中，我沒有看到在map-tag元素上定義的任何z-index。其次，看起來你有一個堆疊上下文的問題。看看css spec並仔細閱讀，因爲z-index，IMO過於複雜。

另一件可以幫助我使用z-index的方法是Firefox中的「檢查元素」選項。如果您選擇要檢查的元素，則會在右下角看到「3-D」選項。點擊它可以更好地顯示堆疊順序。

來源

2012-09-13 09:03:22 noel

CSS中沒有z索引，因爲我不認爲我需要它。然後，我通過檢查Chrome中的元素來嘗試各種值。這就是爲什麼我在我的描述中提到這個問題依然存在，「儘管給了他們足夠高的Z指數值」。你能解釋爲什麼設置標籤的Z-index爲一百甚至十億不會讓它們出現在頁面上的所有其他位置之上？ – Bobe

Z-index不適用於多個絕對定位元素

回答

相關問題