css - 深度(z-index)噩梦

Question

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

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

然而，这必须不改变:

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

• highlight div 必须保持绝对定位。

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

PS:斜体 引用了 <div> 的 ID s 在 fiddle 示例中，对于懒得访问它的人。

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 咬伤，不尊重低值。可能仍然是问题，也可能不是问题。;-)