絕對定位的div與更高的Z指數顯示在其他div

我有一個HTML代碼，在某些點，我無法檢測到一個錯誤。這是我的JSFiddle。絕對定位的div與更高的Z指數顯示在其他div

特別是，當我繼續「顯示更多」時，應該在所有內容之上顯示具有最高z-index的絕對定位div。但是，您可能會看到第一個絕對定位div顯示在其他內容下。根據類似問題的回答，我已經爲div的每個容器設置了z-index值和position類型（絕對值或相對值）。

任何想法來解決這個問題？

來源

2012-09-29 JeanValjean

一旦刪除所有z-index並檢查。我希望你能得到你的解決方案 –

好吧，如果我只將z-index值（例如1000）設置爲具有類** detail-modal-window **的div，則一切正常。問題是它的容器應該設置一個z-index值（例如10），但瀏覽器似乎忽略了10 <1000！ – JeanValjean

@GhostAnswer謝謝，我解決了以下建議並使用z-index：auto – JeanValjean

由於Ghost Answer評論，我解決了這個問題。

在其他答案我讀到，應該把一個值增加一個價值以及一個position:relative到一個div的所有容器，將顯示懸停。也許這並非總是如此。這是我做的：

我刪除了所有的z-index值和不必要的定位（我認爲後者是沒有意義的）。
我將z-index:auto設置爲我要在懸停時顯示的div容器。

現在代碼工作正常：這是更新JSFiddle。

來源

2012-09-29 08:28:28 JeanValjean

試試這個CSS

.offer-info-shops span 
position:absolute; 
z-index:1000;

JSFIDDLE

來源

2012-09-29 07:33:43

對不起，但它不起作用！你試過了嗎？你能給我看一個可用的JSFiddle嗎？ – JeanValjean

它不起作用。你有沒有看到第二個「顯示更多」顯示在上面？要突出顯示此問題，請查看與絕對定位div相同的[JSFiddle]（http://jsfiddle.net/gteEg/3/）白色背景 – JeanValjean

有趣的問題。

更改以下z折射率：

.offer-content, .offer-content-info-shops{z-index:auto}

.detail-modal-window{z-index:1}

http://jsfiddle.net/gteEg/12/

通過這樣做，所有的元素相互比較有自己的z折射率。

您遇到的問題是因爲您已經爲offer-content和.offer-content-info-shops分配了z-index，所以您創建了一個堆棧上下文，這意味着.offer-content-info的子元素例如.detail-modal-window與其在.offer-content-info-shops中的兄弟姐妹相比具有其z-索引。

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index

來源

2012-09-29 09:10:15 davidtingsu

您是否首先閱讀了我自己的答案？ – JeanValjean

我發佈我的解決方案後，頁面更新，然後我看到了您的解決方案。好工作搞清楚。 – davidtingsu

絕對定位的div與更高的Z指數顯示在其他div

回答

相關問題