1

次のHTMLコードがあるとします

HTML

<div class="a">
  <div class="b">
   <div class="c"></div>
  </div>
</div>

CSS 

.a, .b, .c {
  width: 100px;
  height: 100px;
  position: relative;
}

.a {
  background: red;
   z-index: 999;
}

.b {
  background: green;
   margin: 40px;
   z-index: 500;
}

.c {
  background: gray;
  margin: 40px;
  z-index: 100;
}

今、私はそれを正反対にしたい、つまり、すべての上に赤を付けたい. 位置を に設定して z-index を使用しようとしましrelativeたが、機能しません。これがjsfiddleデモです

4

1 に答える 1

3

できません。値が積み重ねられてz-indexいるため、親は常に子の後ろにあります。

レンダリング ツリーがキャンバスに描画される順序は、スタック コンテキストの観点から記述されます。スタッキング コンテキストには、さらにスタッキング コンテキストを含めることができます。スタッキング コンテキストは、その親スタッキング コンテキストの観点からはアトミックです。他のスタッキング コンテキストのボックスは、そのボックスのいずれの間にも配置されない場合があります。- W3 http://www.w3.org/TR/CSS2/visuren.html#z-index

z-indexonを設定すると、すべての子に.aも同じ設定が行われます。z-indexたとえば、--を設定z-index:999すると、同じインデックスが作成され、役に立たなくなります。これを実現するには、要素を別の要素の親または子にすることはできません。これが機能するには、要素が兄弟である必要があります。.a.b.c

彼らが兄弟である場合、これはどのように見えるかです -それはうまくいきます!

于 2013-10-18T16:57:21.460 に答える