divデフォルトの位置 (つまりposition:static) を持つ と、位置divを持つ がありますfixed。
要素の Z インデックスを設定すると、固定要素を静的要素の背後に配置することは不可能のようです。
#over {
width: 600px;
z-index: 10;
}
#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under"></div>または、jsfiddle のこちら:http://jsfiddle.net/mhFxf/
position:absolute静的要素を使用することでこの問題を回避できますが、なぜこのようなことが起こるのかを教えていただけますか?
（これに似た質問があるようですが、（Zインデックスを壊す位置を修正) しかし、満足のいく答えがないので、ここでサンプルコードを使って質問します)
ベストアンサー1
次のスニペットに示すようposition: relativeに追加します。#over
#over {
width: 600px;
z-index: 10;
position: relative;
}
#under {
position: fixed;
top: 14px;
width: 415px;
left: 53px;
border: 1px solid;
height: 10%;
background: #f0f;
z-index: 1;
}<div id="over">
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</>
</div>
<div id="under"></div>