5

絶対配置ボックスがいくつかあります。それらの1つは、ボックスよりも大きいネストされたポップアップを持っています。すべてのボックスの前にポップアップを作成したい。

z-index: 100ボックスとポップアップの設定z-index: 200は役に立ちません。ポップアップのあるボックスの後にドキュメント順で表示されるボックスは、ポップアップを超えているように見えます。Z インデックスについて見逃していることは何ですか?

div {
    border: 1px solid black;
}

.container {
    position: relative;
}

.foo {
    position: absolute;
    background-color: white;
    width: 5em;
    z-index: 100;
}

#b0 {
    top: 0em;
    left: 0em;
}

#b1 {
    top: 3em;
    left: 1em;
}

#b2 {
    top: 6em;
    left: 2em;
}

#b3 {
    top: 9em;
    left: 3em;
}

#b4 {
    top: 12em;
    left: 4em;
}

.popup {
    z-index: 200;
    position: absolute;
    left: 1em;
    top: -1em;
    width: 8em;
    height: 8em;
    background-color: grey;
}
<div class="container">
    <div class="foo" id="b0">
        <span>absolute box b0</span>
    </div>
    <div class="foo" id="b1">
        <span>absolute box b1</span>
        <div class="popup">
            popup box inside b1
        </div>
    </div>
    <div class="foo" id="b2">
        <span>absolute box b2</span>
    </div>
    <div class="foo" id="b3">
        <span>absolute box b3</span>
    </div>
</div>

http://jsfiddle.net/B59pR/2/

4

2 に答える 2

5

これらすべてをすばやく理解するには、https://css-tricks.com/almanac/properties/z/z-index/を見る必要があります。特にそれが言う部分で：

また、ネスティングが大きな役割を果たしていることにも注意してください。要素 B が要素 A の上にある場合、要素 A の子要素が要素 B より高くなることはありません。

そこで行ったことは、下位の要素から子を取得し、上位の要素の子の上に取得しようとすることでした。

z-index 101 の #b1 ボックスを取得するだけです。

div {
    border: 1px solid black;
}

.container {
    position: relative;
}

.foo {
    position: absolute;
    background-color: white;
    width: 5em;
    z-index: 100;
}

#b0 {
    top: 0em;
    left: 0em;
}

#b1 {
    top: 3em;
    left: 1em;
}

#b2 {
    top: 6em;
    left: 2em;
}

#b3 {
    top: 5em;
    left: 3em;
}

#b1 {
    z-index: 101;
}

.popup {
    z-index: 200;
    position: absolute;
    left: 3em;
    top: -1em;
    width: 8em;
    height: 8em;
    background-color: grey;
}
<div class="container">
    <div class="foo" id="b0">
        <span>absolute box b0</span>
    </div>
    <div class="foo" id="b1">
        <span>absolute box b1</span>
        <div class="popup">
            popup box inside b1
        </div>
    </div>
    <div class="foo" id="b2">
        <span>absolute box b2</span>
    </div>
    <div class="foo" id="b3">
        <span>absolute box b3</span>
    </div>
</div>

あなたが理解できるように、このフィドルでこれを修正しました。

于 2016-06-15T13:53:11.733 に答える
2

コアとなるアイデアは、要素が DOM ツリー順 (深さ優先) で再帰的にレンダリングされるということです。

  1. 要素自体の背景と境界線
  2. 負の zindex で配置された子
  3. ポジショニングされていないコンテンツ
  4. zindex がゼロ (または欠落) の配置された子
  5. 正の zindex で配置された子

これは、親のツリー順序が子の z-index よりも優先されることを意味します。

問題の例では、すべてのfooボックスの zindex=100 が等しく、ステップ 3 でツリー順になっています。ポップアップの一部の「叔父」は、親の後にレンダリングされます。

参考文献:

https://www.w3.org/TR/CSS22/visuren.html#propdef-z-index https://www.w3.org/TR/CSS22/zindex.html

于 2016-06-16T16:17:09.690 に答える