Question

我在试图找出HTML stacking concept时遇到困难。根据我的阅读，将一个div放在z-index 2 应该，使其显示在一个带有z-index 1的div上面......但是it's not doing that。

此代码......


<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。我认为在写你的问题时这只是一个错字。您应该在红色div中指定position:relative。

z-index仅适用于位置为fixed，absolute或relative的元素。相对效果很好，如小提琴所示。

我在堆叠概念中缺少什么？

1 个答案: