Question

The best way to illustrate this question is with...a Fiddle! 在您访问小提琴之前，请注意最灰色元素背后有文字，该文字位于带边框的浅灰色元素的顶部。

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

然而，这必须不更改：

HTML，元素和包装应保持不变。在 root 中排除 wrap1 和 wrap2 的顺序。

高亮 div必须保持绝对定位。

使用background-color样式突出显示不是一个选项，突出显示的存在是必须的。

PS：斜体引用小提琴示例中<div>的id，对于任何懒得去访问它的人来说。

Answer 1

我能够通过adding a z-index to text在突出显示前面显示文字。（将z-index添加到 wrap1 也有效。）诀窍是要记住z-index不适用于静态定位的元素，所以你需要给出相同的div position: relative。

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

（大z-index因为我曾被IE咬过，不尊重过去的低值。可能还是可能不是问题。; - ）

Answer 2

#wrap1{position:absolute;z-index:2;}

Answer 3

z-index可能难以掌握。我认为有人已经回答了你的问题，但是如果你想了解它们的工作原理，这是一个非常全面的指南：

http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/

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

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

深度（z指数）的噩梦

3 个答案: