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

821 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

Article précédent：Comment styliser le contenu InnerHTML dans Angular à l'aide de l'encapsulation de vue ? Article suivant：Comment puis-je corriger la première ligne et la première colonne d'un tableau déroulant avec JavaScript ?

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

Derniers articles par auteur