たとえば、次の 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