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 来做到这一点。