3

たとえば、次の HTML と CSS を使用します。

<div class="fixed"></div>
<div class="wrapper">
  <div class="child"></div>
</div>

.fixed {
  background: blue;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.wrapper, .child {
  position: absolute;  
  height: 20px;
  width: 20px;
  padding: 20px;
}

.wrapper {
  z-index: 1;
  background: red;
}

.child {
  position: absolute;
  z-index: 3;
  background: yellow;
}

予想される動作は、上に.child表示されますが、非表示ですが、http://jsfiddle.net/STLMR/.fixedではすべての上に表示されます (Chrome + Firefox でテスト済み)。これにはいくつかのトリックがありますか、それとも私が見逃している CSS の癖はありますか?.wrapper .fixed

4

2 に答える 2

4

CSS では、z-index絶対ではなく、親コンテナーに対して相対的です。「絶対」とは、属性を指しているわけposition: absoluteではありません。混乱を招く可能性があるため、これを述べています。

関連: https://stackoverflow.com/a/7490187/671092

于 2013-01-07T15:24:17.027 に答える
2

.childをより高いz-indexを持つ新しいコンテナに移動する必要があり.fixedます。

于 2013-01-07T15:25:42.677 に答える