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

Question

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

特别是，当我继续"显示更多"时，应该在所有内容之上显示具有最高 z 索引的绝对定位div。但是，如您所见，第一个绝对定位的div 显示在其他内容下。如类似问题的回答中所述，我已经为div的每个容器设置了一个z-index值和position类型（绝对或相对）。

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

Answer 1

感谢幽灵回答评论，我解决了这个问题。

在其他答案中，我读到应该增加 z 索引值，并对悬停时显示的div 的所有容器进行position:relative。也许这并不总是正确的。这是我所做的：

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

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

Answer 2

试试这个css

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

吉斯菲德尔

Answer 3

有趣的问题。

更改以下 z 索引：.offer-content

， .offer-content-info-shops{z-index：auto}

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

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

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

您遇到的问题是，由于您将 z-index 分配给 offer-content-content 和 .offer-content-info-shops，因此您创建了一个堆栈上下文，这意味着 .offer-content-info 的子元素（如 .detail-modal-window）与 .offer-content-info-shop 中的同级元素相比具有其 z-index。

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