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

只是为了澄清上面提到的@Quentin你的css应该是什么样的

* {
   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-index将落后于具有更高z-index的所有内容。

Answer 3

添加

.absolute {
    z-index: 1;
}

Demo

位置绝对的div不与位置相对重叠div

3 个答案: