2

再多的 z-index 诡计等，都不会允许此处的“foo”一词出现在背景图像的后面，对div吗？

<div>
  <span>foo</span>
</div>

或者，考虑一下：

<div class="a"></div>
<div class="b">
  <span class="x">X</span>
  <span class="y">Y</span>
</div>

是否可以在前面.x渲染时在后面 渲染？.a.y .a

我不知道这样做的任何技术。

注意：如果这仅在 Webkit 中有效，那就没问题了。

4

2 回答 2

1

从规格：

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

  1. 构成堆叠上下文的元素的背景和边框。
  2. 具有负堆栈级别（最负优先）的子堆栈上下文。
  3. 流入的、非内联级别的、非定位的后代。
  4. 未定位的浮动。
  5. 流入的、内联级的、非定位的后代，包括内联表和内联块。
  6. 堆栈级别 0 的子堆栈上下文和堆栈级别 0 的定位后代。
  7. 具有正堆栈级别的子堆栈上下文（最不积极的优先）。

请注意，无论它们的z-index. 你不能让孩子们在背景之前画画，所以你真的没有办法用 CSS 来做到这一点。

于 2012-12-06T04:45:30.283 回答
1

我似乎解决了您提出的问题，请查看此 jsfiddle：http: //jsfiddle.net/cAZQP/1/。我把你有问题的元素做成彩色方块，以便更容易看到，并将它们稍微隔开以查看创建的图层。

这些样式似乎有效：

<style>

.a, .x, .y {
    position: absolute;
}
.x {
    z-index: -1;
}

</style>
于 2012-12-06T04:56:09.793 回答