Css 深度（z指数）噩梦

在访问小提琴之前，请注意最灰色元素后面有文本，该元素位于具有边框的浅灰色元素的顶部

有一个主包装div（root），内部有两个包装div（wrap1和wrap2）。这里的问题是我需要wrap2（highlight）的内容在wrap1（text）的内容后面，但在根的背景之前

但是，这必须而不是改变：

• HTML、元素和包装应该保持不变。不包括根中wrap1和wrap2的顺序

• 高光div必须保持绝对位置

• 使用

  背景色设置高光样式

  不是一个选项，必须存在高光

---

注：斜体字表示小提琴示例中

s的id，用于懒得访问它的人。

我能够在高亮显示前显示文本。（将

z-index

添加到wrap1中也有效。）诀窍是要记住

z-index

不适用于静态定位的元素，因此需要给出相同的div

位置：relative

#text {
    position: relative;
    z-index: 1000;
}

---

（大的

z-index

，因为我过去一直被IE不尊重低值的问题所困扰。可能还是个问题；-

z-index可能很难理解。我想有人已经回答了你的问题，但如果你想了解更多他们是如何工作的，这是一个相当全面的指南：

此外，这里还有一个链接，您可以在其中尝试不同的z索引，以及它们如何受不同位置属性的影响（困难的主要原因）

---

+1谢谢，我会尽快接受。实际上，我在两个包装中都尝试了

z-index

，但都不起作用，但这确实有效！但是，等等，就像一个挑战，你能在没有

位置：relative

的情况下完成它吗？@jcc-很高兴听到你成功了！风格相同；您可能没有设置

位置。：-）是的，没错，我从来没有给任何东西设定过任何位置……好提示！附言：是JCOClol@JCOC-我99%确信，如果没有
z-index
，就无法实现这一点，而如果不将
位置设置为
静态
以外的值，则无法使用z-index。但是使用
relative
应该不会给你带来任何问题，除非文本中有绝对定位的内容。我希望其他人回答。+1感谢你花时间拨弄：）
#wrap1{position:absolute;z-index:2;}