z-index実際にはどのように機能しますか？指定されていない要素で機能しますpositionか? position指定された要素を優先しますか(つまり、それらを一番上にします)
数値はこのように負でなければなりませんか?
<div style='z-index:-2;'>below</div>
<div style='z-index:-1;'>less below</div>
<div style='z-index:0;'>on top</div>
か否か？すべての正の数 (増加する値) は、最後が一番上、真ん中が真ん中、最初が一番下になるのでしょうか?
負の整数と正の整数の両方を使用できます。
要素に位置を設定する必要があります。
ただし、これらの詳細に入る前にz-index、基礎から説明させてください。
すべての Web ページは、スタック コンテキストと呼ばれるもので構成されています。これらは文字通り、要素のスタックと考えることができます。z-index プロパティは、各スタック内の項目の順序を決定し、z-index が高いほど上に配置されます。
すべてのページは、(ご想像のとおり) ルート要素から構築されるルート スタッキング コンテキストで始まります。しかし、より多くのスタック コンテキストを作成するには、さまざまな方法があります。1 つの方法は、絶対位置の div です。その子は新しいスタッキング コンテキストになります。
仕様には、新しいスタッキング コンテキストを作成するすべてのインスタンスがリストされています。他の人が述べているように、これには明示的に配置された要素が含まれ、すぐに完全に不透明ではない要素が含まれます。
前に言ったように、要素の位置を明示的にz-index設定した場合にのみ有効です。これは、 、、またはに設定することを意味します。これは、例を通して最もよく示されていると思います。fixedabsoluterelative
この例では、青い div が灰色の div の上にあると予想されますが、その z-index は正しいですか? でも、ご覧の通り一番下です。これはもちろん、その位置を設定していないためです。これを行うと、期待どおりに表示されます。ここでも、位置を設定する必要があります。
仕様は、負の値でも問題ないことも示しています。そうは言っても、負の値を使用する必要はありません。正の整数を使用してもまったく問題ありません。要素のデフォルトz-index値は 0 です。
記録として、w3schools は悪名高い信頼性の低い学習ソースです。迅速で便利なリソースになる可能性がありますが、情報には多くのギャップがあり、時には間違った情報さえあります. Mozilla Developer Networkなどのより信頼できる情報源と、仕様自体を使用することをお勧めします。
説明を始める前に、要素が、、または(NOT )の値をレンダリングz-indexした場合にのみ影響があることに注意してください。これらのそれぞれにより、独自のスタック コンテキストが作成されるためです。つまり、状況に応じて、またはのような値が機能する場合と機能しない場合があります。position:relativeposition:absoluteposition:fixedstaticinitialinherit
また、この投稿では、最初の要素の最初の子の最初の子を選択していることを示すために、1.1.1 という形式を使用することに注意してください。2.1.1 は 2 番目の要素の最初の子の最初の子などになります。
z-indexサブリストを使用した類推で説明するのが最も適切だと思います。最も単純な例から始めましょう。
<div class="top-level"></div>
<div class="top-level sibling"></div>
これを次のようなリストで表すことができます。
デフォルトでは、リストのさらに下にあるものは、その前のものの上にレンダリングされます。したがって、この場合、2 は 1 の上に配置されます。
z-index でできることは、基本的にこのリストを並べ替えることです (いくつかの範囲内で)。z-index が高いほど、要素はリストの下の方に位置します。
ここでは簡単に表示できるようにインライン CSS を使用しますが、実際のコードではインライン CSS を使用しないでください。
<div class="top-level" style="z-index: 1;"></div>
<div class="top-level sibling"></div>
これにより、サブ リストが次のように変更されます。
すごい！これで、HTML の最初の要素が 2 番目の要素の上にレンダリングされます。
これがよりトリッキーになるのは、子 (ネストされた) 要素を扱う場合です。
この状況を考える簡単な方法は、要素のレンダリングが開始されると、要素のすべての子がレンダリングされてから、兄弟に移動すると考えることです。
また、サブリストはレベルを変更できないことに注意してください。つまり、サブリストは、親要素または子要素と同じレベルにあることはできません。
つまり、次の場合は次のようになります。
<div class="top-level">
<div class="sub-level" style="z-index: 1;"></div>
</div>
<div class="top-level sibling"></div>
レンダリング サブリストは次のようになります。
したがって、トップ レベルを見て、どれがリストの一番下にあるかを確認します。この場合は2.0なので1.0の上になります。次に、サブリスト (子) があるかどうかを確認します。そうではないので、1.0 にします。
1.0 には子 1.1 があり、視覚的には 1.0 より上になりますが (z-index を指定しなかった場合と同様)、1.0 は 2.0 よりも小さいため、2.0 よりも下になります。
したがって、1.1 には兄弟がないため、ここでの z-index は役に立ちません。
もう少し複雑な例を見てみましょう:
<div class="top-level">
<div class="sub-level" style="z-index: 2;"></div>
<div class="sub-level sibling"></div>
<div class="sub-level sibling" style="z-index: 1;"></div>
</div>
<div class="top-level sibling">
<div class="sub-level"></div>
</div>
この例のサブ リストは何ですか?
お任せしますが、自分でやってみるのもいいですね。
したがって、視覚的に上から下への順序は、2.1、2.0、1.3、1.2 になります。1.1、1.0。
そんなに悪くないですよね？
この動作は、兄弟の数や深さに関係なく当てはまります。
子が親の上に表示されるというルールの唯一の例外は、子に負の値がある場合z-indexです。負の z-index を指定すると、親要素の下に配置されます。
したがって、次の場合：
<div class="top-level">
<div class="sub-level" style="z-index: -1;"></div>
</div>
<div class="top-level sibling"></div>
サブリスト ツリーは次のようになります。
そして、上から下へのレイヤリングは 2.0、1.0、1.1 になります。
もう少し複雑な例:
<div class="top-level">
<div class="sub-level" style="z-index: -1;"></div>
<div class="sub-level sibling"></div>
</div>
<div class="top-level sibling"></div>
リスト表現:
ただし、負のz-indexesは避ける必要があります。それらが必要だと思われる場合は、HTML の構造が不適切である可能性があります。
それはそれについてです！さらに詳しく知りたい場合は、仕様を読むことをお勧めします。
、、およびを含むがこれらに限定されない他のプロパティは、独自のスタック コンテキストを作成し、要素のレンダリング順序に影響を与える可能性があることに注意してください。opacitytransformwill-change
opacityz-index と同様に機能します。子は親と同じくらい不透明にすることができますが、負の値を持つことはできません。
css プロパティz-indexは、配置された要素でのみ機能します。つまり、プロパティを有効にするには、要素が絶対位置、固定位置、または相対位置である必要がありますz-index。
z-index が高いほど、前面に近く表示されます。プロパティに指定する値は、z-index正または負にすることができます。z-index値が 4 の配置済み要素は、値が 3 の配置済み要素の上に表示されますz-index。
CSS 2.1 では、各ボックスに 3 次元の位置があります。水平方向と垂直方向の位置に加えて、ボックスは「z 軸」に沿って配置され、上下に配置されます。ボックスが視覚的に重なっている場合、Z 軸の位置は特に重要です。
z-index に関するこの記事はまさにあなたが探しているリンクです! 本当によく説明してくれます。
基本的に、数値が大きいほど、要素はスタックの上位に位置します。したがって、1 は 0 の上にあり、-1 は 0 の z-index の下にありますが、負を使用する理由がないため、正のままにしておく必要があります。それは悪い習慣と見なされます。ブラウザーは、他の CSS や HTML コードと同様に、ページをレンダリングするときにそれを解釈します。