绝对定位的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

回答

相关问题