css z-indexの重み問題を詳しく解説-CSSチュートリアル-php.cn

css z-indexの重み問題を詳しく解説

青灯夜游

リリース： 2021-02-13 09:34:35

転載

2758 人が閲覧しました

css z-indexの重み問題を詳しく解説

この記事では、CSS の z-index の重みの問題について説明します。どうすれば上位にしたい要素を上位に、下位にしたい要素を下位にするにはどうすればよいでしょうか？

1. 実際の戦闘における z-index の次の状況を見てみましょう:

一方は位置を定義し、もう一方は定義しています。はポジショニングを定義していません。誰がトップですか?
親ボックスの 1 つは配置されており、もう 1 つは配置されておらず、配置されていない子ボックスは配置されています。誰が一番上ですか?
1 つの親ボックスは配置され、もう 1 つは配置されていません。配置されていない子要素は配置され、配置された子要素に z-index が追加されます。誰が一番上ですか?
両方とも位置決めされていますが、どちらも z-index を設定しません。誰が一番上ですか?
両方とも配置され、1 つは z-index を 1 に設定します。どちらが上ですか?

#2. 基本的な dom 構造とスタイルを設定し、テストの準備をする

基本的な dom 構造を定義します:

css z-indexの重み問題を詳しく解説

<!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 の上で実行されました。

css z-indexの重み問題を詳しく解説

テスト質問 2:

1 つの親ボックスが配置され、もう 1 つは配置されておらず、配置されていない子ボックスが配置され、誰が一番上になりますか?

box1 の redp の位置を設定しました box

.redp {
   background: red;
   position: fixed;
   }

ログイン後にコピー

効果:

box2 はまだ box1 の上にあります。また、box1 の配置された子要素にもあります。

css z-indexの重み問題を詳しく解説

テスト質問 3:

1 つの親ボックスは配置され、もう 1 つは配置されていません。配置されていない子ボックスは配置を設定し、 1 番目に配置子要素に z-index を追加します。誰が一番上ですか?

box1 の redp に z-index を追加します。 box

.redp {
   background: red;
   position: fixed;
   z-index: 1;
   }

ログイン後にコピー

結果:

redp が一番上、box2 が中央、box1 が一番上にあります。底。

css z-indexの重み問題を詳しく解説

テスト質問 4:

両方とも位置決めされていますが、どちらも Z インデックスを設定していません。誰が一番上ですか?

まず最初のスタイルコードを復元し、それから再度変更します。

最初のコードの box1 と box2 のスタイルを変更します

.box1 {
    background: yellow;
    position: fixed;}.box2 {
    background: aqua;
    position: fixed;
    left: 100px;
    top: 30px;}

ログイン後にコピー

効果:

box2 が box1 の上にあります

css z-indexの重み問題を詳しく解説

テスト質問 5:

両方とも配置され、一方は z-index を 1 に設定します。どちらが上ですか?

box1 の z-index を 1 に設定しましょう:

.box1 {
    background: yellow;
    position: fixed;
    z-index: 1;}

ログイン後にコピー

効果:

Box1 は box2 の上で実行されました

css z-indexの重み問題を詳しく解説

4. 結論

次の要素も前の要素の上に配置されています
親同じレベルの要素はすべて配置されます [子は無視]。z インデックスが高い人が一番上になります。
一方の親は配置され、もう一方の親は配置されません。配置されていない要素は次のとおりです。子が配置されたら、配置された子と配置された親を見て、どちらの Z インデックスが高く、誰が一番上にあるかを確認します。

プログラミング関連の知識について詳しくは、

プログラミング教育をご覧ください。！

以上がcss z-indexの重み問題を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。