z-index lors de l'utilisation de :: after under element

Si nous utilisons z-index combiné avec position: absolute; il est possible de placer le ::before d'un élément en lui-même. Il est un bon exemple sur une autre question (jsfiddle.net/Ldtfpvxy).

Fondamentalement

<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 */
}

rend:

z-index lors de l'utilisation de :: after under element

Donc, l'empilage, le contexte/l'ordre est défini par z-index. Mais quand j'applique z-index: 1; à l'élément et z-index: -1; à son ::before je ne peut réaliser la même chose.

Seulement si je omettre z-index de l'élément.

Toutes les idées de pourquoi il en est? Il est l'élément le rendu après son ::before & ::after pseudos afin qu'ils obtiennent la même z-index?

De travail: https://jsfiddle.net/Ldtfpvxy/
Ne fonctionne pas: https://jsfiddle.net/Ldtfpvxy/1/ (seulement ajouté z-index: 1; à l'élément)

source d'informationauteur Sergio

  1. 15

    Votre div et sa pseudo-enfant sont membres de la même empilement contexte, dans ce cas, la racine de l'empilement de contexte. Le nouveau contexte d'empilement vous donner le pseudo-élément serait utilisé comme une référence pour ses enfants (qui sont inexistant), mais le z-index la valeur s'applique à l'actuel contexte d'empilement. Et le CSS dicte la suite de la peinture de la commande de chaque empilement contexte:

    Au sein de chaque contexte d'empilement, les couches suivantes sont peints en
    l'arrière vers l'avant afin:

    1. le fond et les bords de l'élément formant le contexte d'empilement.
    2. l'enfant de l'empilement de contextes négatif de la pile niveaux (plus négatif en premier).
    3. l'écoulement, non en ligne-niveau, non positionné descendants.
    4. la non-placé de flotteurs.
    5. le débit, le niveau, non positionné descendants, y compris les lier les tables et dans la ligne des blocs.
    6. l'enfant de l'empilement des contextes avec pile de niveau 0 et le placé descendants avec une pile de niveau 0.
    7. l'enfant de l'empilement de contextes positif de la pile niveaux (le moins bon).

    Look, enfant empilement des contextes négatif de la pile niveauxcomme votre div::after sont peintes avant l'positionné descendants avec le niveau de la pile 0comme le div lui-même. C'est ce qui explique le comportement vous l'avez remarqué.

  2. 6

    Précisant z-index vous de la création d'un empilement de contenu;

    si c'est fait sur l'enfant ::after pseudo-elem le parent n'est pas d'établir un nouvel empilement de contenu et tout fonctionnera comme prévu.

    Mais l'ajout de z-index sur l'élément parent pour commencer une nouvelle pile (qui sera aussi envelopper l'enfant-pile..).

    Et si vous regardez les 2 premiers points sur pile rendu spécification vous verrez fond sera rendue avant que d'autres enfants des piles:

    Au sein de chaque contexte d'empilement, les couches suivantes sont peints dans l'arrière vers l'avant afin:

    1. la fond et les bordures de l'élément formant le contexte d'empilement.
    2. la enfant empilement des contextes négatif de la pile niveaux (plus négatif en premier).
    3. ... ...

    voici un exempleà clarifier les différentes comportement de rendu pour imbriquée empilement de fond.

    BTW

    position: relative n'est pas une optionà défaut position:static z-index n'a aucun effet.