web-dev-qa-db-ja.com

CSSのz-indexが機能しない

このdiv

<div style="position: relative; z-index: 99;">123</div>

これより上に表示されています

<div style="position: fixed; z-index: 3000;">456</div>

Z-index：98を最初のdivに割り当てると、すべて問題ありません。必要に応じて、さらにコードを提供できます。

cssz-index
11
Pave

このフィドルではそうではありません： http://jsfiddle.net/kcgCX/

私はあなたのコードの他の何かが変わっているに違いないと思います。それ。

5
zeroos

z-indexはその親を対象としています-両方とも同じ親要素にありますか？ z-indexは独自のスタックを実装します-例：

ボックスD、E、FはボックスCの子孫です->ボックスF（z-index：-1）はボックスB（z-index：1）をオーバーレイしています。これは、ボックスc（これはz-インデックス：3オーバーボックスb）

<div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;">
      <b>A:2</b>
    </div>
    
    <div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;">
      <b>B:1</b>
    </div>
    
    <div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3;
                border:1px solid #888; background:#eee;">
      <b>C:3</b>
    
      <div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;">
        <b>D:2</b>
      </div>
    
      <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;">
        <b>E:3</b>
      </div>
    
      <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;">
        <b>F:-1</b>
      </div>
    </div>
31
Jules

問題はそれかもしれないと思います

<div style="position: fixed; z-index: 3000;">456</div>

このサイトによると、位置は固定されています： http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html 、z-indexesは相対でのみ機能しますまたは絶対位置。これが、他のdivがz-indexで機能する理由です。

そうでない場合は、HTMLを正しく作成しなかったと思います。

このインテルがお役に立てば幸いです。

8
J.I.N Kleiss

Protip：十分なcontainer小さい（Ej。高さの100px）があり、childrenが大きい（Ej、200px）場合、z-indexが適切に設定されていても、 コンテナにプロパティoverflow: hiddenがある場合、子は完全には表示されません。

4
Alejandro Silva