Le Z-index est-il absolu ou relatif en HTML ?

Z-Index : absolu ou relatif ?

Dans le développement Web, la propriété z-index régit l'ordre d'empilement des éléments HTML. Cependant, une question courante se pose : l'indice z d'un élément est-il absolu ou relatif ?

Indice Z absolu ou relatif

La propriété z-index définit la position d'un élément dans la troisième dimension, par rapport à ses frères et sœurs. Il ne détermine pas la position de l'élément dans la mise en page tridimensionnelle de la page entière. Par conséquent, z-index est relatif au parent de l'élément.

Dans l'exemple fourni :

<code class="html"><div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div></code>

#dBonjour nid sous son div parent. Malgré un z-index plus élevé (200), il apparaîtra derrière #dDomination car ce dernier a un z-index frère de 100. En effet, le z-index est relatif au div parent.

Normes et variantes du navigateur

Le W3C définit la propriété z-index comme relative au parent élément. Cependant, différents navigateurs peuvent avoir des implémentations différentes :

1. Dans la plupart des navigateurs, le z-index est relatif au z-index calculé du parent, qui est généralement 0.
2. Dans Internet Explorer 6 et versions antérieures, z-index était relatif au document racine.
3. Dans ,** Safari et Chrome, les éléments avec le même z-index sont classés en fonction de leur position dans la source de la page.

Visualisation Exemple

Considérez le code suivant :

<code class="html"><div id="X" style="z-index:1">
  <div id="Y" style="z-index:3"></div>
</div>
<div id="Z" style="z-index:2"></div></code>

Au départ, vous pourriez supposer que #Y chevauche #Z en raison de son indice z plus élevé. Cependant, puisque #Y est un enfant de #X (qui a un z-index de 1), #Z apparaîtra devant à la fois #X et #Y.

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!