Question

我有一个HTML代码，但在某些时候我无法检测到错误。这是我的JSFiddle。

特别是，当我继续“显示更多”时，应该在所有内容上显示具有最高z-index的绝对定位div。但是，您可能会看到第一个绝对定位div显示在其他内容下。根据类似问题的答案，我已经为每个容器设置了z-index值和position类型（绝对或亲属） div。

有什么想法解决这个问题？

Answer 1

感谢 Ghost Answer 评论，我解决了这个问题。

在其他答案中，我读到应该将增加的z-index 值以及position:relative添加到将在悬停时显示的div的所有容器中。也许它并不总是正确的。这是我做的：

我删除了所有z-index值和不必要的定位（我认为后者没有意义）。
我将z-index:auto设置为我将在悬停时显示的div容器。

现在代码工作正常：这是更新的JSFiddle。

Answer 2

试试这个css

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

JSFIDDLE

Answer 3

有趣的问题。

更改以下z-indices：

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

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

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

通过这样做，所有元素的z指数相互比较。

您遇到的问题是因为您已经为商品内容和.offer-content-info-店分配了一个z-index，您创建了一个堆栈上下文，这意味着.offer-content-info这样的子元素因为.detail-modal-window的z-index与.offer-content-info-shops中的兄弟姐妹相比。

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

具有较高z-index的绝对定位div显示在其他div下

3 个答案: