web-dev-qa-db-ja.com

Z-Index相対または絶対ですか？

次の質問に対する答えを見つけようとしています。

要素のz-indexスタイルは絶対スタック順ですか、それとも親に対するスタック順ですか？

たとえば、次のコードがあるとします。

<div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div>

#dHello、または#dDominationのどちらが前面に表示されますか？

これは単なる例です。私はこれを複数の場所で試しましたが、結果は異なるようです。誰かが解決の信頼できるソースを知っているかどうかを見ています：

1）z-indexに関する実際の標準は何ですか（特にこのトピックについて）。 2）個々のブラウザは、実際の実装でどのように異なりますか？

ありがとう！

csspositioningz-index
36
Tom Murray

Afaik、z-indexは、その要素がposition: relative;に設定されていない限り機能しません。同じ要素にposition: relative;の子があり、z-indexがより高く設定されている場合、子はその親の上に表示されます。

そのため、「絶対」と「相対」の両方のスタック順序の要素をフレーズどおりに持っています。

すべてのブラウザでほぼ同じように処理されると思います。

8
Chris G.

例えば：

  <!DOCTYPE html>
<html>
<head>
<style>

.x1 {
    position:relative;
    width:100%;
    clear:both;
    display:block;
  z-index:1000;
}

.x2 {
    position:fixed;
    width:100%;
    height:50px;
    background-color:#ff0000;
}

.x3 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#888;
}
.x4 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}
.x5 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#ff00ff;
}
.x6 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}

</style>

</head>
<body>
<div class='x1'>this class is relative
<div class='x2'>this class is fixed</div>
</div>

<div class='x3'>x3: this class is relative</div>
<div class='x4'>x4: this class is relative</div>
<div class='x5'>x5: this class is relative</div>
<div class='x6'>x6: this class is relative</div>
<div class='x3'>x3: this class is relative</div>

</body>
</html>
0
Ali Paeizi

z-indexのW3C仕様 です。

あなたの質問に基づいた最も重要な行は次のとおりだと思います：

レンダリングツリーがキャンバスにペイントされる順序は、コンテキストのスタックに関して説明されています。スタッキングコンテキストには、さらにスタッキングコンテキストを含めることができます。スタッキングコンテキストは、その親スタッキングコンテキストの観点からはアトミックです。他のスタッキングコンテキストのボックスは、そのボックスの間に入らない場合があります。

これは、z-index: -100のdivとz-index: 200のdivの間に何も描画できないことを示しているようです。

0
Chris Marasti-Georg