web-dev-qa-db-fra.com

z-index lors de l'utilisation de l'élément :: after under

Si nous utilisons z-index combiné avec position: absolute; il est possible de placer le ::before d'un élément sous lui-même. Il y a un bon exemple sur ne 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:

enter image description here

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

Seulement si j'omets z-index de l'élément.

Des idées pourquoi c'est? L'élément est-il rendu après son ::before & ::after pseudos pour qu'ils obtiennent le même z-index?

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

cssz-indexpseudo-element
16
Sergio

Votre div et son pseudo-élément :: after sont membres du même contexte d'empilement, dans ce cas le contexte d'empilement racine. Le nouveau contexte d'empilement que vous donnez au pseudo-élément serait utilisé comme référence à ses enfants (qui sont inexistants), mais le z-index la valeur s'applique au contexte d'empilement actuel. Et la spécification CSS dicte l'ordre de peinture suivant pour chaque contexte d'empilement:

Dans chaque contexte d'empilement, les calques suivants sont peints dans l'ordre suivant:

  1. l'arrière-plan et les bordures de l'élément formant le contexte d'empilement.
  2. les contextes d'empilement enfants avec des niveaux de pile négatifs (les plus négatifs en premier).
  3. les descendants en flux, non en ligne, non positionnés.
  4. les flotteurs non positionnés.
  5. les descendants en flux, au niveau en ligne, non positionnés, y compris les tables en ligne et les blocs en ligne.
  6. les contextes d'empilement enfants avec le niveau de pile 0 et les descendants positionnés avec le niveau de pile 0.
  7. les contextes d'empilement d'enfants avec des niveaux de pile positifs (le moins positif en premier).

Regardez, les contextes d'empilement enfants avec des niveaux de pile négatifs , tels que votre div::after sont peints avant les descendants positionnés avec le niveau de pile 0 , tels que div lui-même. Cela explique le comportement que vous avez remarqué.

17
bfavaretto

En précisant z-index vous créez un nouveau contenu empilable;

si cela se fait uniquement sur l'enfant ::after pseudo-elem le parent n'établira pas un nouveau contenu d'empilement et tout fonctionnera comme prévu.

Mais en ajoutant z-index sur l'élément parent démarrera une nouvelle pile (qui encapsulera également la pile enfant ..).
Et si vous regardez les 2 premiers points sur spécification de rendu de pile vous verrez que le fond sera rendu avant les autres piles enfants:

Dans chaque contexte d'empilement, les calques suivants sont peints dans l'ordre suivant:

  1. l'arrière-plan et les bordures de l'élément formant le contexte d'empilement.
  2. les contextes d'empilement enfants avec des niveaux de pile négatifs (les plus négatifs en premier).
  3. ... ...

voici un exemple , pour clarifier les différents comportements de rendu pour l'arrière-plan d'empilement imbriqué.

position: relative n'est pas facultatif ; avec la valeur par défaut position:static, z-index n'a aucun effet.

6
maioman