Pourquoi mon pseudo-élément ::before n'apparaît-il pas derrière son élément parent lorsque j'applique un z-index à l'élément parent ?

Z-index et pseudo-éléments : une exploration approfondie

Dans cet article, nous plongerons dans le monde fascinant du CSS les contextes d'empilement et comment ils interagissent avec les pseudo-éléments, en particulier le pseudo-élément ::before. Nous explorerons un problème courant rencontré lors de l'utilisation de z-index avec ::before et fournirons une solution complète qui garantit le comportement d'empilement correct.

Le problème

Considérez le CSS suivant :

<code class="css">header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30;
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}</code>

Dans ce code, nous avons créé un élément 'header' avec un pseudo-élément ::before. Le comportement souhaité est que l'élément 'header' jaune soit au premier plan et le pseudo-élément rouge ::bebe soit en arrière-plan. Cependant, lorsque nous appliquons un z-index de 30 à l'élément 'header', le pseudo-élément ::before n'apparaît plus derrière le parent.

Explication

Pour comprendre ce comportement, nous devons approfondir le concept de contextes d'empilement CSS. Un contexte d'empilement définit un ensemble de couches dans lesquelles les éléments sont empilés les uns devant ou derrière les autres en fonction de leurs valeurs d'index z. La création d'un contexte de stacking est déclenchée par certaines propriétés CSS, dont le z-index.

Dans l'exemple ci-dessus, lorsque l'on applique un z-index de 30 à l'élément 'header', cela crée un nouvel stacking contexte. Ce nouveau contexte d'empilement sépare l'élément 'header' et ses enfants (y compris le pseudo-élément ::before) du reste du flux de documents.

Le pseudo-élément ::before est considéré comme un élément enfant au sein le contexte d'empilement de l'élément 'header'. Par conséquent, il est contraint par les limites du contexte d'empilement et ne peut pas flotter en dehors de celui-ci pour apparaître derrière l'élément 'header'.

Solution

Pour résoudre ce problème, nous ne peut pas simplement augmenter le z-index du pseudo-élément ::before. Au lieu de cela, nous devons créer un nouveau contexte d'empilement pour le pseudo-élément ::before afin qu'il puisse s'empiler correctement derrière l'élément 'header'.

Une façon d'y parvenir est d'envelopper l'élément 'header'. dans un autre élément, comme indiqué ci-dessous :

<code class="css"><div class="wrapper">
  <header>
    ...
  </header>
</div>

.wrapper { 
    position:relative;
    z-index:30;
}</code>

En créant ce nouvel élément et en lui attribuant un z-index, nous créons essentiellement un nouveau contexte d'empilement distinct du contexte d'empilement de l'élément 'header'. Cela permet au pseudo-élément ::before de s'empiler correctement derrière l'élément 'header' dans le nouveau contexte d'empilement.

Conclusion

Comprendre les contextes d'empilement CSS et les pseudo- Les interactions entre les éléments sont essentielles pour créer des mises en page complexes et garantir le bon positionnement des éléments. En gérant soigneusement les contextes d'empilement, nous pouvons contrôler la superposition des éléments et obtenir les effets visuels souhaités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!