web-dev-qa-db-ja.com

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

デフォルトの位置にあるdiv（つまりposition:static）とdiv位置にあるfixedがあります。

要素のzインデックスを設定すると、固定要素を静的要素の後ろに置くことは不可能に思えます。

    #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を使用することでこれを回避することができますが、誰でも教えてもらえます なぜ これは起こっていますか？

（これと似たような質問があるようです（ Fixed Positioning breaking z-index ）が、満足のいく答えがないので、ここで私の例のコードでこれを求めています）

cssz-index
386
DanSingerman

この問題はいくつかの方法で解決できますが、実際には、スタッキング規則を知っていると、自分に最適な答えを見つけることができます。

ソリューション

<html>要素はあなたの唯一のスタッキングコンテキストなので、スタッキングコンテキスト内のスタッキング規則に従うだけで、要素はこの順序でスタックされることがわかります。

  1. スタッキングコンテキストのルート要素（この場合は<html>要素）
  2. 負のz-index値を持つ位置付けられた要素（およびその子）（高い値は小さい値の前にスタックされ、同じ値を持つ要素はHTMLの外観に従ってスタックされます）
  3. 配置されていない要素（HTMLの外観順）
  4. Autoのz-index値を持つ位置付けられた要素（およびその子）（HTMLでは外観順）
  5. 正のz-index値を持つ位置付けられた要素（およびその子）（高い値は小さい値の前にスタックされ、同じ値を持つ要素はHTMLの外観に従ってスタックされます）

だからあなたはできる

  1. zインデックスを-1に設定し、#underの位置に-ve z-indexが位置のない#over要素の後ろに現れるようにします。
  2. ルール5が適用されるように、#overの位置をrelativeに設定します。

本当の問題

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

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

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

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

  • 要素が文書のルート要素（<html>要素）の場合
  • 要素がstatic以外のposition値と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-index値を持つ位置付けられた要素（およびその子）（高い値は小さい値の前にスタックされ、同じ値を持つ要素はHTMLの外観に従ってスタックされます）
  3. 配置されていない要素（HTMLの外観順）
  4. Autoのz-index値を持つ位置付けられた要素（およびその子）（HTMLでは外観順）
  5. 正のz-index値を持つ位置付けられた要素（およびその子）（高い値は小さい値の前にスタックされ、同じ値を持つ要素はHTMLの外観に従ってスタックされます）
112
Mr_Moneybags

#overにposition: relative;を追加してください

    #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>

Fiddle

428
stephenmurdoch

z-index は特定のコンテキスト、つまりrelative、fixed、またはabsoluteの位置内でのみ機能します。

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

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

34
cusimar9

あなたのover divにはポジショニングがないので、z-indexはそれをどこにどのように配置するのか（そして何に関しては？）を知りません。あなたのover divの位置をrelativeに変えるだけで、そのdivには副作用がなくなり、アンダーdivはあなたの意志に従います。

これがjsfiddleの例です。 Fiddle

編集 ：誰かがすでにこの答えに言及しているのを見た！

28
iamserious

#underを負のz-indexにします。 -1

これは、z-indexプロパティがposition: static;では無視されるために起こります。ですから、あなたが書いたCSSコードでは、z-indexでどのくらい高く設定しても、1は両方の要素に対して#overです。

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

18
Carlos Precioso

ナビゲーションメニューを作成していました。私はナビゲーションのCSSにoverflow: hiddenがあり、すべてが隠されています。私はそれがz-index問題であると思いました、しかし、私は本当に私のナビの外ですべてを隠していました。

5
thedanotto

要素が通常の流れの外側に配置されている場合、それらは他の要素と重なることがあります。

http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp 上の重複要素のセクションに従ってください。

3
Khoa Nguyen

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

それらは、ドキュメントから切り離され、最も近い固定/絶対配置の親に配置されるときに動作します。 （Word by Wordではない）

これはzindexの計算を少し複雑にします。私はbody要素の中に動的にコンテナーを作成し、そのようなすべての要素（そのbody-level要素の中に "my-fixed-ones"として分類される）を移動することによって私の問題を解決しました（同じ状況） ）

0
Bakhshi