ホームページ > 記事 > ウェブフロントエンド > css z-indexの重み問題を詳しく解説
css z-indexの重み問題を詳しく解説
- 青灯夜游転載
- 2021-02-13 09:34:352696ブラウズ
この記事では、CSS の z-index の重みの問題について説明します。どうすれば上位にしたい要素を上位に、下位にしたい要素を下位にするにはどうすればよいでしょうか？
1. 実際の戦闘における z-index の次の状況を見てみましょう:
一方は位置を定義し、もう一方は定義しています。はポジショニングを定義していません。誰がトップですか?
親ボックスの 1 つは配置されており、もう 1 つは配置されておらず、配置されていない子ボックスは配置されています。誰が一番上ですか?
1 つの親ボックスは配置され、もう 1 つは配置されていません。配置されていない子要素は配置され、配置された子要素に z-index が追加されます。誰が一番上ですか?
両方とも位置決めされていますが、どちらも z-index を設定しません。誰が一番上ですか?
両方とも配置され、1 つは z-index を 1 に設定します。どちらが上ですか?
#2. 基本的な dom 構造とスタイルを設定し、テストの準備をする
基本的な dom 構造を定義します:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {margin: 0;padding: 0;}
.box1, .box2 {
width: 500px;
height: 200px;
border: 2px solid;
margin: 10px;
}
.box1 {
background: yellow;
}
.box2 {
background: aqua;
}
.redDiv, .blueDiv {
width: 150px;
height: 150px;
}
.redDiv {
background: red;
}
.blueDiv {
background: blue;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</body>
</html>
3. テストの開始
テスト質問 1:一方は位置を定義しており、もう一方は位置を定義していません. 上には誰がいますか？box2 の位置を設定し、その位置を変更します。
.box2 {
background: aqua;
position: fixed;
left: 100px;
top: 30px;
}効果: box2 は box1 の上で実行されました。
1 つの親ボックスが配置され、もう 1 つは配置されておらず、配置されていない子ボックスが配置され、誰が一番上になりますか?box1 の redp の位置を設定しました box
.redp {
background: red;
position: fixed;
}効果: box2 はまだ box1 の上にあります。また、box1 の配置された子要素にもあります。
1 つの親ボックスは配置され、もう 1 つは配置されていません。配置されていない子ボックスは配置を設定し、 1 番目に配置 子要素に z-index を追加します。誰が一番上ですか?box1 の redp に z-index を追加します。 box
.redp {
background: red;
position: fixed;
z-index: 1;
}結果: redp が一番上、box2 が中央、box1 が一番上にあります。底。
両方とも位置決めされていますが、どちらも Z インデックスを設定していません。誰が一番上ですか?まず最初のスタイル コードを復元し、それから再度変更します。
最初のコードの box1 と box2 のスタイルを変更します
.box1 {
background: yellow;
position: fixed;}.box2 {
background: aqua;
position: fixed;
left: 100px;
top: 30px;} 効果: box2 が box1 の上にあります 
両方とも配置され、一方は z-index を 1 に設定します。どちらが上ですか?box1 の z-index を 1 に設定しましょう:
.box1 {
background: yellow;
position: fixed;
z-index: 1;} 効果: Box1 は box2 の上で実行されました 
4. 結論
- 配置された要素は配置されていない要素の上にあります
- 次の要素も前の要素の上に配置されています
- 親同じレベルの要素はすべて配置されます [子は無視]。z インデックスが高い人が一番上になります。
- 一方の親は配置され、もう一方の親は配置されません。配置されていない要素は次のとおりです。子が配置されたら、配置された子と配置された親を見て、どちらの Z インデックスが高く、誰が一番上にあるかを確認します。
プログラミング教育をご覧ください。 ！
以上がcss z-indexの重み問題を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。