z-indexが固定位置で機能しない

422

私が持っているdivデフォルトの位置（すなわち付きposition:static）とdivでfixed位置を。

要素のz-indexを設定した場合、固定要素を静的要素の背後に配置することは不可能のようです。

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>
スニペットを展開

または、jsfiddleのこちら：http ://jsfiddle.net/mhFxf/

position:absolute static要素を使用することでこれを回避 できますが、なぜこれが起こっているのか誰かに教えてもらえますか？

（これと同様の質問があるようです（Z-indexを修正する固定配置）は、満足のいく答えが得られないため、サンプルコードでここで質問しています）

css  z-index 
— ダンシンガーマン
ソース

回答:

146

この質問はいくつかの方法で解決できますが、実際には、スタックルールを知ることで、自分に合った最良の答えを見つけることができます。

ソリューション

<html>要素はあなたの唯一のスタッキングコンテキストで、これだけスタッキングコンテキスト内のスタッキングルールに従うと、あなたは要素がこの順に積層されていることがわかります

  1. スタッキングコンテキストのルート要素（<html>この場合は要素）
  2. 負のZインデックス値を持つ配置された要素（およびその子）（高い値は低い値の前に積み重ねられます。同じ値の要素はHTMLの外観に従って積み重ねられます）
  3. 配置されていない要素（HTMLでの表示順）
  4. 配置された要素（およびその子）のz-index値がautoである（HTMLでの外観によって順序付けられている）
  5. 正のZインデックス値を持つ配置された要素（およびその子）（高い値は低い値の前に積み重ねられます。同じ値の要素はHTMLの外観に従って積み重ねられます）

だからあなたはできる

  1. 配置された#under-ve Z-indexが配置されていない#over要素の背後に表示されるように、z-indexを-1に設定します
  2. 位置に設定#overするとrelative、そのルール5がそれに適用されますので、

本当の問題

要素の重なり順を変更する前に、開発者は次のことを知っておく必要があります。

  1. スタッキングコンテキストが形成されるとき
    • デフォルトでは、<html>要素はルート要素であり、最初のスタックコンテキストです。
  2. スタックコンテキスト内のスタック順序

以下のスタッキング順序とスタッキングコンテキストルールはこのリンクからのものです

スタッキングコンテキストが形成されるとき

  • 要素がドキュメントのルート要素である場合（<html>要素）
  • 要素にstatic以外の位置値とauto以外のz-index値がある場合
  • 要素の不透明度の値が1未満の場合
  • いくつかの新しいCSSプロパティもスタッキングコンテキストを作成します。これらには、変換、フィルター、CSSリージョン、ページ化されたメディアなどが含まれます。https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • 一般的なルールとして、CSSプロパティがオフスクリーンコンテキストでのレンダリングを必要とする場合、新しいスタッキングコンテキストを作成する必要があるようです。

スタッキングコンテキスト内のスタッキング順序

要素の順序：

  1. スタッキングコンテキストのルートエレメント（<html>エレメントはデフォルトで唯一のスタッキングコンテキストですが、どのエレメントもスタッキングコンテキストのルートエレメントにすることができます。上記のルールを参照してください）
    • 子要素をルートスタッキングコンテキスト要素の後ろに置くことはできません
  2. 負のZインデックス値を持つ配置された要素（およびその子）（高い値は低い値の前に積み重ねられます。同じ値の要素はHTMLの外観に従って積み重ねられます）
  3. 配置されていない要素（HTMLでの表示順）
  4. 配置された要素（およびその子）のz-index値がautoである（HTMLでの外観によって順序付けられている）
  5. 正のZインデックス値を持つ配置された要素（およびその子）（高い値は低い値の前に積み重ねられます。同じ値の要素はHTMLの外観に従って積み重ねられます）
— Mr_Moneybags
ソース
3
— メンタリスト
450

position: relative;#overに追加

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>
スニペットを展開

フィドル

— スティーブンマードック
ソース
14
updates.html5rocks.com/2012/09/…は、位置の固定、絶対、相対がz-indexとどのように相互作用するかについての優れたリファレンスです。
— 2013
@marflarどういたしまして。ところで、あなたのフィドルを見てみましょう。最後に追加のタグ</body>と追加のタグ</html>があります。
— ミシェルエアーズ2014年
2
以下は、スタッキングコンテキストを示すフィドルです。ここで説明されています。
— kdbanman 2014
position: relative要素から削除すると、実際に問題が解決しました。
— Alex G
thankssssssss <3
— Karl Anthony Baluyot
32

Zインデックスは、特定のコンテキスト内で動作すなわちrelative、fixedまたはabsolute位置。

相対divのz-indexz-indexは、絶対divまたは固定divのとは関係ありません。

編集 これは不完全な答えです。この答えは誤った情報を提供します。以下の@Dansingermanのコメントと例を確認してください。

— cusimar9
ソース
3
特定のコンテキストでz-indexがどのように機能するかを詳しく説明したり、リファレンスを提供したりできますか？
— DanSingerman
13
z-indexは、一方が相対的な位置で、もう一方が絶対的な場合でも、2つのdivの順序に影響します。
— ラファエル2012
65
この答えは間違っています。 ここで説明するように、スタックコンテキストを示すフィドルがあります。@Dansingerman。
— kdbanman 2014
1
jsFiddle @kbdanmanに感謝します。ビジュアルでスタッキングコンテキストを理解するのに役立ちました。
— dhruvpatel 2014
8
@JoeMorano、絶対zや相対位置に関係なく、高zは上部に近づきます。重要なのは、ドキュメントツリーのレベルです。div 4、5、6はdiv 3の子であり、div 1と2はdiv 3の兄弟です。div1はdiv 3よりもzが高いため、div 1はdiv 3とそのすべての子の上にあります。div 2はzがdiv 3よりも小さいので、div 3とそのすべての子はdiv 2の上にあります
— kdbanman '20
31

あなた以来overのdiv位置決めを持っていない、のz-indexがどこで、どのようにそれを配置するために知らない（と何に関して？）。over divの位置を相対に変更するだけで、そのdivに副作用がなく、under divがあなたの意志に従います。

ここにjsfiddleの例があります：Fiddle

編集：私はすでにこの回答について誰かが言及しているのを見る！

— 私は本気です
ソース
18

たとえば#under、否定を与えるz-index-1

これは、z-indexプロパティがで無視されるposition: static;ために起こります。これはたまたまデフォルト値です。あなたが書いたCSSのコードでは、z-indexある1両方の要素のためにあなたがそれを設定する方法高に関係なく#over。

#under負の値を与えることにより、それはあらゆるz-index: 1;要素の後ろ、すなわちになり#overます。

— カルロスプレシオソ
ソース
私もこの問題を抱えていました-「アンダー」divを0に設定するとうまくいきました。
— Mick Sear
5

ナビゲーションメニューを作成していました。私はoverflow: hiddenすべてを隠した私のナビゲーションのCSSにあります。Zインデックスの問題だと思っていましたが、実際には、ナビゲーションの外側にあるものはすべて隠されていました。

— セダノット
ソース
0

CSS仕様で定義されている固定要素（および絶対要素）の動作：

それらはドキュメントからデタッチされ、最も近い固定/絶対位置の親に配置されるときに動作します。（単語ごとの引用ではありません）

これにより、zindexの計算が少し複雑になります。body要素にコンテナーを動的に作成し、そのようなすべての要素（「my-fixed-ones」としてクラス化されている要素）をそのbody-level要素内に移動して、問題（同じ状況）を解決しました）

— バフシ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.