css - 是否有可能在其容器的背景*后面*呈现内容？

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 :

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

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