Question

任何数量的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，那就没关系。

Answer 1

来自spec：

在每个堆叠上下文中，绘制了以下图层   从前到后的订单：


构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

流入的，非内联级别，未定位的后代。

未定位的花车。

in-flow，内联级别，非定位后代，包括内联表和内联块。

堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。

具有正堆栈级别的子堆叠上下文（最少积极的第一个）。

请注意，子元素总是在父元素的背景之后绘制，而不管它们是z-index。你不能让孩子在背景之前画画，所以你真的没办法用CSS做这件事。

Answer 2

我似乎解决了你问过的问题，请查看这个jsfiddle：http://jsfiddle.net/cAZQP/1/。我将有问题的元素制作成彩色方块，以便更容易看到，并将它们略微间隔开来以查看创建的图层。

这些样式似乎有效：

<style>

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

</style>

是否有可能将内容*渲染到其容器的背景之后？

2 个答案: