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:04684parcourir

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!

css html Object using class Property var JS console this position border background transform issue

Déclaration：

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

Article précédent：Comment styliser le contenu InnerHTML dans Angular à l'aide de l'encapsulation de vue ?Article suivant：Comment styliser le contenu InnerHTML dans Angular à l'aide de l'encapsulation de vue ?

Articles Liés

Voir plus