Comment positionner un élément enfant au-dessus de son parent à l'aide de z-index en CSS ?

Élever l'élément enfant au-dessus du parent à l'aide de z-Index

En HTML, les éléments suivent une structure hiérarchique appelée modèle d'objet de document (DOM). Lorsqu'il existe plusieurs éléments qui se chevauchent, leur propriété z-index détermine lequel est affiché en haut.

Considérez le code HTML suivant :

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

Supposons que vous souhaitiez que le div « enfant » apparaisse au-dessus du div "wholePage". Cependant, par défaut, le z-index du div « parent » affecte tous ses éléments enfants.

// Wrong approach
.parent {
  z-index: 100;
  position: relative;
}

// Incorrect output: "child" is hidden behind "wholePage"

Solution :

Comme mentionné dans la réponse fournie, c'est impossible de définir le z-index d'un enfant supérieur à celui de son parent en utilisant uniquement CSS. Il existe cependant deux solutions :

1. Supprimer le z-index du parent :

Supprimer la propriété z-index du div "parent" :

.parent {
  position: relative;
}

Cela permet au div "enfant" d'hériter de son propre z -index, qui peut être défini pour être supérieur à "wholePage".

2. Faire un frère ou une sœur au lieu d'un enfant :

Au lieu d'être un enfant du div "parent", faites du div "enfant" un frère de "wholePage" et définissez son z-index en conséquence :

<div class="sibling">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

.sibling {
  position: absolute;
  z-index: 100;
}

.child {
  position: absolute;
  z-index: 150;
}

Dans ce cas, "child" et "wholePage" sont tous deux frères et sœurs, et le z-index supérieur du div "child" garantit il apparaît en haut. Notez qu'en utilisant « position : absolue ; » au lieu de « position : relative ; » dans ce contexte permet à l'enfant de se positionner en dehors du flux de ses parents.

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!