html - 我从堆叠概念中遗漏了什么？

Question

我在试图弄清楚HTML 堆叠概念时遇到了困难。根据我的阅读，将 div 放在 z-index 2应该使它显示在 z-index 1 的 div 上方......但它没有这样做。

这段代码...

<style>
body > div { height: 100px; width: 100px; }

#blue {
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 1;
    overflow: auto;
}
#red { z-index: 2; }
</style>

<div id="blue">
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
    <div>blue</div>
</div>
<div id="red">red</div>

... 导致红色 div上方的蓝色 div。将蓝色的 z-index 更改为 -1 最终将其置于红色 div 后面，但随后滚动条停止工作。

我错过了什么？

Answer 1

试试下面的小提琴：http: //jsfiddle.net/mVZ9d/

两件事，你有script而不是style. 我认为这只是写你的问题时的一个错字。您应该position:relative在红色 div 中指定。

z-index only works with elements with position fixed, absolute or relative. Relative works just fine as shown in the fiddle.