BinaryDevelop
  1. ホーム
  2. css

[解決済み] 固定位置でz-indexが機能しない

2022-03-22 01:39:17

質問

私は 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 を静的要素で使用したいのですが、どなたか教えてください。 なぜ が発生するのでしょうか？

(これと似たような質問があるようです( z-indexを壊す固定位置決め しかし、満足のいく回答がないため、私のサンプルコードを使ってここで質問しています)

解決方法は？

この問題はいろいろな方法で解くことができますが、実際には、積み重ねのルールを知ることで、自分に合った最適な答えを見つけることができます。

解決方法

について <html> 要素が唯一のスタッキングコンテキストなので、スタッキングコンテキスト内のスタッキングルールに従えば、要素がこの順序でスタックされることがわかります。

  1. スタッキングコンテキストのルート要素( <html> 要素)
  2. 負のz-index値を持つ要素（およびその子要素）を配置（高い値は低い値の前に積み重ねられ、同じ値を持つ要素はHTMLでの外観に従って積み重ねられます）。
  3. 位置決めされていない要素（HTML上の出現順に並ぶ）
  4. z-indexがautoの位置指定要素（およびその子要素）（HTML上の出現順に並べます。）
  5. 正のz-index値を持つ配置された要素（およびその子要素）（高い値は低い値の前に積み重ねられ、同じ値を持つ要素はHTML内の出現順序に従って積み重ねられます。）

だから、あなたは

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

本当の問題

開発者は、要素の積み重ね順を変更しようとする前に、以下のことを知っておく必要があります。

  1. スタッキングコンテキストが形成される場合
    • デフォルトでは <html> 要素はルート要素であり、最初のスタッキングコンテキストである
  2. 積み重ねコンテキスト内の積み重ね順序

以下の積み重ね順序と積み重ねコンテキストのルールは、このリンクからのものです。

スタッキングコンテキストが形成される場合

  • ある要素がドキュメントのルート要素であるとき ( <html> 要素)
  • 要素のpositionがstatic以外、z-indexがauto以外の場合
  • 要素の不透明度が1より小さい場合
  • いくつかの新しいCSSプロパティもスタッキングコンテキストを作成します。transforms、filter、css-regions、paged media、そしておそらくその他が含まれます。 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. z-indexがautoの要素（およびその子要素）を配置（HTML上の出現順に並べる）
  5. 正のz-index値を持つ配置された要素（およびその子要素）（高い値は低い値の前に積み重ねられ、同じ値を持つ要素はHTML内の出現順序に従って積み重ねられます。）

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します