Maison > Article > interface Web > Pourquoi « z-index » ne fonctionne-t-il pas lors de l'utilisation de « transform » ?
Pourquoi « z-index » ne fonctionne-t-il pas lors de l'utilisation de « transform » ?
- DDDoriginal
- 2024-11-01 15:30:04773parcourir
z-index ne fonctionne pas : comprendre et résoudre les problèmes de positionnement
Lorsque vous travaillez avec plusieurs éléments positionnés en utilisant z-index, il est possible de rencontrer des situations dans lesquelles la superposition attendue ne se produit pas. Un de ces problèmes survient lorsque l'on tente de placer un élément derrière un autre qui a été positionné à l'aide de z-index.
Dans le code fourni, deux anneaux sont créés : le premier, positionné au-dessus du cercle. sans le haut, et le second, derrière le cercle. Ce dernier, malgré une valeur d'index z de -3, reste devant en raison de la propriété transform qui lui est appliquée.
La solution réside dans la suppression de la propriété transform et le remplacer par une alternative. Voici le code modifié :
:root{ <br> --size:200px;<br>}</p>
<h1>arrière-plan {</h1>
<p>largeur:100%;<br>hauteur:100%;<br> position:absolue;<br> haut:0;<br> gauche:0;<br> arrière-plan : dégradé linéaire (-23,5deg, #000033, #00001a);<br> z-index:-2;<br>}</p>
<h1>background #mainplanet {</h1>
<p>width:var(--size);<br> height:var(--size);<br> background:#fff;<br> position:relative;<br> top:calc(50% - var(--size)/2);<br> left:calc(50% - var(--size)/2);<br> border-radius:50%;<br> ></p>
<h1>background #mainplanet:avant,#background #mainplanet:after{</h1>
<p>content:"";<br> width:calc(var(--size) * 1.5);<br> hauteur:calc(var(--size) / 2);<br> border:30px solid #000;<br> position:absolute;<br> top:10px;<br> left:-80px;<br> border-radius:50%;<br> transform: rotateX(66deg) rotateY(170deg);<br>}</p>
<h1>background #mainplanet:before{</h1>
<p>border-top-color:transparent ;<br>}</p>
<h1>background #mainplanet:after{</h1>
<p>z-index:-3;<br>}<div id="background"><br> <div id="mainplanet"><br> </div><br></div> ;
Avec cette modification, le deuxième anneau est désormais correctement positionné derrière le cercle, démontrant l'efficacité de l'utilisation de l'index z pour manipuler la superposition d'objets.
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!