Maison > interface Web > tutoriel CSS > 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 » ?

DDD
Libérer: 2024-11-01 15:30:04
original
798 Les gens l'ont consulté

Why Doesn't `z-index` Work When Using `transform`?

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&gt ;

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal