ここにあなたが望むものの推測デモがあります: http://jsfiddle.net/YVw58/2/
HTML 部分:
<div id="parent">
This is parent.
<div id="compare">compare</div>
<div id="childBelow">below</div>
<div id="childUp">up</div>
</div>
CSS 部分:
#parent {
background-color: #f66;
}
#childBelow {
background-color: #6f6;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 100px;
z-index: -1;
}#parent {
background-color: #f66;
}
#childBelow {
background-color: #6f6;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 100px;
z-index: -1;
}
#childUp {
background-color: #66f;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 20px;
}
#compare {
position: absolute;
left: 50px;
top: 50px;
background-color: #ccc;
width: 160px;
height: 80px;
}
#childUp {
background-color: #66f;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 20px;
}
#compare {
position: absolute;
left: 50px;
top: 50px;
background-color: #ccc;
width: 160px;
height: 80px;
}
もちろん、ブラウザのバージョンによって結果は異なります。Firefox 13.0.1、Chrome 23.0、Opera 12.0、および IE 9.0 でテストしましたが、すべて期待どおりの結果が得られました。
注意すべきもう 1 つの点は、前のデモで示したように、イベント エリアが大きな z-index を持つ要素で覆われている場合、小さな z-index を持つ要素はイベント (例: マウス クリック) を受信しないことです。
詳細については、 http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/で z-index を参照することもできます。