0

私は 3 つの要素、同じレベルの 2 つ、および 1 つの子を持ち、すべて固定位置を持っています。親を下に、同じレベルの要素を中央に、子を上に配置するように z-index プロパティを設定する必要があります。

子の z-index を高く設定しようとしましたが、うまくいきません。

<div class="red">
    <div class="blue"></div>
</div>
<div class="green"></div>

これがケースhttp://jsfiddle.net/udENm/21/です（私redは下、green真ん中、blue上に、まだ維持redしgreenて同じレベルにいる必要があります）。

私のCSSはこのようなものです

.red {
    position: fixed;
    z-index: 2;
}

.green {
    position: fixed;
    z-index: 2;
}

.blue {
    position: fixed;
    z-index: 5;
}
4

5 に答える 5

2

プロパティは、それを含む要素のスタック コンテキストz-index内でのみ有効です。

別の言い方をすれば、同じ親要素内に多数のブロック要素がある場合、前後の順序を非常に簡単に制御できます。ただし、z-indexグローバル コンテキスト内ではなく、この親要素内でのみ前から後ろへの順序を制御できます。

.blueそのため、好きなだけ前後に移動でき.redます。また、z 平面内で好きなように.red切り替えることもできます。ただし、異なるスタッキング コンテキストにあるため、との間.greenに配置することはできません。.green.red.blue

EDIT スタッキング コンテキストは、フロー内の要素にのみ適用されます。を使用するposition:absoluteと、これを行うことができます。Rick Calder の回答を参照してください

于 2012-10-22T15:09:51.570 に答える
2

ポジショニングを絶対に設定し、親 div (赤いもの) から z-index を完全に削除します。 http://jsfiddle.net/calder12/udENm/32/

.foo {
background: red;
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}

.bar {
background: green;
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
width: 100px;
height: 100px;
}

.child {
background: blue;
position: absolute;
left: 40px;
top: 40px;
z-index: 5;
width: 50px;
height: 50px;
}

</p>

于 2012-10-22T15:10:04.743 に答える
1

緑のブロックの z-index は、赤のブロックよりも低くする必要があります。あなたが投稿したものではなく、このCSSを使用しました：

.foo {
    background: red;
    position: fixed;
    left: 50px;
    top: 50px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.bar {
    background: green;
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 1;
    width: 100px;
    height: 100px;
}

.child {
    background: blue;
    position: absolute;
    top:50%;
    left:50%;
    z-index: 5;
    width: 50px;
    height: 50px;
}

緑が z-index 1 になり、赤が z-index 2 になり、青のブロックが絶対配置になっていることがわかります。

于 2012-10-22T15:11:46.880 に答える
0

こんな感じ？

http://jsfiddle.net/kBv7R/

HTML

    <div class="foo">
        <div class="child"></div>
         <div class="bar"></div>
    </div>

CSS

.foo {
    background: red;
    position: fixed;
    left: 50px;
    top: 50px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.bar {
    background: green;
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 5;
    width: 100px;
    height: 100px;
}

.child {
    background: blue;
    position: fixed;
    left: 90px;
    top: 90px;
    z-index: 6;
    width: 50px;
    height: 50px;
}

</p>

于 2012-10-22T15:14:53.390 に答える
0

Z-index は、ある意味で親に対して相対的です。赤はすでに 2 であり、青は兄弟と比較して z-index 5 のみですが、緑のような外部要素とは異なります。

各スタック コンテキストは自己完結型です。要素のコンテンツがスタックされた後、要素全体が親スタック コンテキストのスタック順で考慮されます。

于 2012-10-22T15:10:38.910 に答える