「transform」を使用すると「z-index」が機能しないのはなぜですか?

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

この変更により、2 番目のリングが円の後ろに正しく配置されるようになり、z-index を使用してオブジェクトの階層化を操作することの有効性が示されました。

以上が「transform」を使用すると「z-index」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：ビューのカプセル化を使用して Angular で InnerHTML コンテンツをスタイル設定する方法? 次の記事：JavaScript を使用してスクロール可能なテーブルの最初の行と列を修正するにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• 型が Go のインターフェイスを満たすかどうかを確認する
  2024-11-01 23:13:29
• CSS ボックスに斜めの角を作成するにはどうすればよいですか?
  2024-11-01 23:12:29
• dlnetst.exe - dlnetst.exe とは?
  2024-11-01 23:11:29
• Javascript の「atob」が UTF-8 Base64 文字列を適切にデコードできないのはなぜですか?
  2024-11-01 23:10:29
• C ですべてのファイルバイトを文字配列に読み取る方法
  2024-11-01 23:09:31
• JavaScript で Base64 から UTF-8 文字列をデコードするにはどうすればよいですか?
  2024-11-01 23:08:29
• Linux 上で Java アプリケーションをサービスとして実行するにはどうすればよいですか?
  2024-11-01 23:07:29
• discmgru.dll - discmgru.dll とは何ですか?
  2024-11-01 23:06:29
• テキストエリアや入力内のテキストを異なる色で強調表示するにはどうすればよいですか?
  2024-11-01 23:05:29
• dkaat94c.dll - dkaat94c.dll とは?
  2024-11-01 23:04:29

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1731

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1885

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1597

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1510

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1547

関連トピック

詳細>

• 400 件の不正なリクエストを解決する方法
• vs2008のインストールに失敗する問題の解決方法
• pycharmのインストールチュートリアル
• sprintf関数の使い方を詳しく解説
• 2つのdivを並べて表示する方法
• 海外CDNサービスプロバイダーランキング
• ラージ関数とマックス関数の違い
• スパンタグ機能