絕對位置的div與相對位置的div不重疊

Question

HTML：

<div class="absolute">
</div>
<div class="relative">
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    width: 100%;
}
.relative {
    position: relative;
    background-color: #eee;
    height: 200px;
    width: 100%;
}
.absolute {
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
}

jsfiddle： http : //jsfiddle.net/Lv96zy10/

如何使用位置相對值在div上方放置div？

提前致謝。

Answer 1

使用z-index來控制堆棧順序。

給您想要的div更高的z-index號。

Answer 2

只是為了澄清您的CSS上面提到的@Quentin應該是什么樣子

* {
   margin: 0;
   padding: 0;
}
html, body {
   height: 100%;
   width: 100%;
}
.relative {
   position: relative;
   background-color: #eee;
   height: 200px;
   width: 100%;
   z-index: 0; 
}
.absolute {
   background-color: #000;
   position: absolute;
   top: 0;
   left: 0;
   width: 100px;
   height: 100%;
   z-index: 1;
}`

當元素彼此相對放置時，最低的z索引將位於所有具有較高z索引的元素之后。

Answer 3

加

.absolute {
    z-index: 1;
}

演示版