ホームページ > 記事 > ウェブフロントエンド > 「transform」を使用すると「z-index」が機能しないのはなぜですか?
「transform」を使用すると「z-index」が機能しないのはなぜですか?
- DDDオリジナル
- 2024-11-01 15:30:04773ブラウズ
z-index が機能しない: 位置決めの問題の理解と解決
位置決めされた複数の要素を操作する場合z-index を使用すると、期待した階層化が行われない状況が発生する可能性があります。このような問題の 1 つは、z-index を使用して配置された要素の背後に要素を配置しようとすると発生します。
提供されたコードでは、2 つのリングが作成されます。1 つ目は円の上に配置されます。トップなしで、2番目はサークルの後ろにあります。後者は、z-index 値が -3 であるにもかかわらず、transform プロパティが適用されているため、前面に残ります。
解決策は、transform プロパティを削除し、代替品と交換します。変更されたコードは次のとおりです:
:root{ <br> --size:200px;<br>}</p>
<h1>背景 {</h1>
<p>幅:100%;<br> 高さ:100%;<br> 位置:絶対;<br>上:0;<br> 左:0;<br> 背景: 線形グラデーション(-23.5deg, #000033, #00001a);<br> z-index:-2;<br>}</p>
<h1>background #mainplanet {</h1>
<p>幅:var(--size);<br>高さ:var(--size);<br>背景:#fff;<br>位置:相対;<br>上:calc(50% - var(--size)/2);<br> 左:calc(50% - var(--size)/2);<br> 境界半径:50%;<br> }</p>
<h1>background #mainplanet:before,#background #mainplanet:after{</h1>
<p>content:"";<br> width:calc(var(--size) * 1.5);<br> 高さ:calc(var(--size) / 2);<br> ボーダー:30px ソリッド #000;<br> 位置:絶対;<br> 上:10px;<br> 左:-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> ;
この変更により、2 番目のリングが円の後ろに正しく配置されるようになり、z-index を使用してオブジェクトの階層化を操作することの有効性が示されました。
以上が「transform」を使用すると「z-index」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。