深度（z-index）噩梦
说明这个问题的最好方法是用......小提琴！ 之前< /strong> 您访问小提琴，请注意最灰色的元素后面有文本，该元素位于具有边框的浅灰色元素的顶部。
有一个主包装 div (root) 和两个内部包装 div (wrap1 和 wrap2)。这里的问题是我需要将 wrap2 的内容（突出显示）放在 wrap1 的内容（文本）后面>)，但在根的背景前面。
然而，这一点不能改变：
HTML、元素和换行应保持不变。排除 root 内 wrap1 和 wrap2 的顺序。
highlight div 必须保持绝对定位。
用
background-color设置highlight样式不是一个选项，highlight的存在是必须的。
PS：斜体引用了小提琴示例中
The best way to illustrate this question is with...a Fiddle! Before you visit the fiddle, notice there is text behind the grayest element, which is on top of a light gray element that has a border.
There is a main wrapping div (root), and two wrapping divs inside (wrap1 and wrap2). The problem here is that I need the content of wrap2 (highlight) to be behind the content of wrap1 (text), but in front of the background of the root.
This, however, must not change:
The HTML, the elements and wraps should be left untouched. Excluding the order of wrap1 and wrap2 inside root.
The highlight div must keep the absolute positioning.
Styling highlight with
background-coloris not an option, the existence of highlight is a must.
PS: the italics reference the id's of <div>s in the fiddle example, for whomever was too lazy to visit it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我能够通过 添加
z-index来显示突出显示前面的文本文本。 （将z-index添加到 wrap1 也可以。）诀窍是记住z-index不适用于静态定位元素，因此您需要给出相同的 divposition:relative。（
z-index较大，因为我过去曾被 IE 不尊重低值所困扰。可能仍然是问题，也可能不是问题。;-)I was able to display the text in front of the highlight by adding a
z-indexto text. (Adding thez-indexto wrap1 also works.) The trick is to remember thatz-indexdoesn't apply to statically-positioned elements, so you need to give the same divposition: relative.(Large
z-indexbecause I've been bitten by IE not respecting low values in the past. May or may not still be an issue. ;-)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-index can be difficult to grasp. I think somebody already answered your question, but if you want to learn more how they work, this is a pretty comprehensive guide:
http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
And also, here is a link where you can try out different z-index and how they are affected by different position properties (the main reason for difficulty)
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp