z-index当使用:: after下的元素 [英] z-index when using ::after under element

问题描述

如果我们使用 z-index 结合 position：absolute; ，可以将 :: before 。有一个很好的例子，介绍

无效： https://jsfiddle.net/ Ldtfpvxy / 1 / （只添加 z-index：1; 到元素）

方案

您的div及其伪子元素是同一堆栈上下文的成员，在这种情况下是根堆叠上下文。您提供伪元素的新堆叠上下文将用作对其子代（不存在）的引用，但 z-index 值适用于当前堆叠上下文。而且 CSS规格规定了每个堆叠上下文的以下绘制顺序：

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

子堆叠上下文具有负堆栈级别>

非定位浮动广告。

非定位浮动广告。

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

查看 的堆叠上下文的子项，例如 div :: after 具有堆栈级别0的定位后代，例如 div 本身。这解释了你注意到的行为。

If we use z-index combined with position: absolute; its possible to place the ::before of a element under itself. There is a good example on another question (jsfiddle.net/Ldtfpvxy).

Basically

<div id="element"></div>

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

renders:

So the stacking context/order is defined by z-index. But when I apply z-index: 1; to the element and z-index: -1; to its ::before I cannot achieve the same thing.

Only if I omit z-index from the element.

Any ideas why this is? Is the element rendered after its ::before & ::after pseudos so they get the same z-index?

Working: https://jsfiddle.net/Ldtfpvxy/
Not working: https://jsfiddle.net/Ldtfpvxy/1/ (only added z-index: 1; to element)

解决方案

Your div and its pseudo-child are members of the same stacking context, in this case the root stacking context. The new stacking context you give the pseudo-element would be used as a reference to its children (which are non-existant), but the z-index value applies to the current stacking context. And the CSS spec dictates the following paint order for each stacking context:

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).

Look, child stacking contexts with negative stack levels, such as your div::after are painted before the positioned descendants with stack level 0, such as the div itself. This explains the behavior you noticed.

这篇关于z-index当使用:: after下的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！