web-dev-qa-db-ja.com

z-indexプロパティは実際にはどのように機能しますか？

どうやって 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>

か否か？すべての正の数値（増加する値）は、最後が一番上、中央が真ん中、最初が一番下になりますか？

htmlcssz-index
19
user1988903

負の整数と正の整数の両方が許可されます。

位置は要素に設定する必要があります。

これらの詳細を説明する前に、z-indexゼロから。

すべてのWebページは、スタックコンテキストと呼ばれるもので構成されています。これらは、文字通り、要素のスタックと考えることができます。 z-indexプロパティは、各スタック内のアイテムの順序を決定し、より高いz-indexがさらに上に配置されます。

すべてのページは、ルートスタッキングコンテキストで始まります。このコンテキストは、ルート要素から構築されます（予想どおり）。ただし、さまざまな方法で、より多くのスタックコンテキストを作成できます。 1つの方法は、絶対配置されたdivです。その子は新しいスタックコンテキストになります。

スペック は、新しいスタッキングコンテキストを作成するすべてのインスタンスをリストします。他の人が述べたように、これはexplicitly配置された要素を含み、完全に不透明ではない要素をすぐに含みます。

前にも言ったように、 z-indexは、要素の位置をexplicitly設定した場合にのみ有効になります。これは、fixed、absolute、またはrelativeに設定することを意味します。これは例を通して最もよく示されると思います。

この例では 、zインデックスが与えられている場合、灰色のdivの上に青色のdivがあると思いますよね？しかし、ご覧のとおり、それは一番下にあります。もちろん、これは位置を設定していないためです。 一度実行すると 期待どおりに表示されます。 再び、位置を設定する必要があります。

仕様では、負の値でも問題ないことが示されています。とはいえ、負の値を使用する必要はありません。正の整数も使用できます。デフォルト z-index要素の値が0です。

ちなみに、w3schoolsは、信頼できないことで有名な学習ソースです。これは迅速で便利なリソースですが、情報には多くのギャップがあり、時には間違った情報さえあります。 Mozilla Developer Network や スペック自体 などの信頼性の高いソースを使用することをお勧めします。

35
jamesplease

説明する前に、z-indexが影響するのは、要素にrendered値のposition:relative、position:absolute、またはposition:fixed（NOT static）これらはそれぞれ独自の スタッキングコンテキスト を持つためです。つまり、initialやinheritなどの値は、状況に応じて機能する場合と機能しない場合があります。

また、この投稿では、1.1.1という形式を使用して、最初の要素の最初の子の最初の子を選択していることを示しています。 2.1.1は、2番目の要素の最初の子の最初の子などになります。

z-indexは、サブリストを使用したアナロジーで最もよく説明されていると思います。最も簡単な例から始めましょう：

<div class="top-level"></div>
<div class="top-level sibling"></div>

これを次のようなリストで表すことができます。

  1. トップレベル
  2. トップレベルの兄弟

これで、デフォルトでは、リストのさらに下にあるものが、その前にあるものの上にレンダリングされます。したがって、この場合、2は1の上に配置されます。

Z-indexでできることは、基本的にこのリストを（ある程度の範囲内で）並べ替えることです。 Z-indexが高いほど、要素がリストのより下にあります。

ここではインラインCSSを使用して簡単に表示できるようにしますが、プロダクションコードではインラインCSSを絶対に避けてください。

<div class="top-level" style="z-index: 1;"></div>
<div class="top-level sibling"></div>

これにより、サブリストが次のように変更されます。

  1. トップレベルの兄弟
  2. トップレベル-Z-index：1

すごい！これで、HTMLの最初の要素が2番目の要素の上にレンダリングされます。

これがさらに難しくなるのは、子（ネストされた）要素を処理する場合です。

要素のレンダリングが開始されると、兄弟に移動する前に、要素のすべての子がレンダリングされると考えるのがこの状況について考える簡単な方法です。

また、サブリストはレベルを変更できないことを忘れないでください。つまり、それらは親または子要素の同じレベルにすることはできません。

つまり、次のような場合です。

<div class="top-level">
    <div class="sub-level" style="z-index: 1;"></div>
</div>
<div class="top-level sibling"></div>

レンダリングサブリストは次のようになります。

  1. トップレベル
    1. サブレベル-z-index1
  2. トップレベルの兄弟

したがって、私たちはトップレベルを見て、どれがリストの一番下にあるかを確認します。この場合、2.0は1.0の上にあります。次に、サブリスト（子）があるかどうかを調べます。そうではないので、1.0に移動します。

1.0には子1.1があり、これは視覚的には1.0を上回ります（Zインデックスを指定しなかった場合と同じです）が、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>

この例のサブリストは何ですか？

あげますが、一人でやってみるのもいいですね。

  1. トップレベル
    1. サブレベルの兄弟
    2. サブレベルの兄弟-z-index1
    3. サブレベル-z-index2
  2. トップレベルの兄弟
    1. サブレベル

したがって、視覚的に上から下への順序は、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>

サブリストツリーは次のようになります。

  1. サブレベル-z-index-1
    1. トップレベル
  2. トップレベルの兄弟

また、上から下へのレイヤーは、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>

リスト表現：

  1. サブレベル-z-index-1
    1. トップレベル
      1. サブレベル
  2. トップレベルの兄弟

ただし、負のz-indexesは避けてください。それらが必要だと思う場合は、HTMLが正しく構成されていない可能性があります。

それだけです！さらに学習したい場合は、 仕様 を読むことをお勧めします。

opacity、transform、およびwill-changeを含むがこれらに限定されない その他のプロパティ は、独自のスタッキングコンテキストを作成し、影響を与える可能性があることに注意してください要素のレンダリング順序。

opacityはz-indexと同様に機能します-子はその親と同じくらい不透明にすることができますが、負の値を持つことはできません。

5
Zach Saucier

子が親の上に描画されるというルールの唯一の例外は、子のZインデックスが負の場合です。負のz-indexを指定すると、それ自体が親要素の下に配置されます。

1
thhh

Cssプロパティz-indexは、配置された要素でのみ機能します。つまり、z-indexプロパティを有効にするには、要素が絶対位置、固定位置、または相対位置である必要があります。

Zインデックスが高いほど、正面に近くなります。 z-indexプロパティに指定する値は、正または負にすることができます。 z-index値が4の位置付けられた要素は、z-index値が3の位置付けられた要素の上に表示されます。

CSS 2.1では、各ボックスには3次元の位置があります。水平位置と垂直位置に加えて、ボックスは「z軸」に沿って配置され、上下にフォーマットされます。 Z軸の位置は、ボックスが視覚的に重なっている場合に特に関係があります。

0
Kevin Bowersox