Question

我做了this fiddle，我期待红色div直接位于黄色下方。他们不是。如何将div up和down相对于wrapper定位？

猜测它应该很简单，但我无法让它发挥作用。 我想我需要使用相对。 “酒吧”是时间线，可以自由地“漂浮”。

HTML：

<div class="wrapper" style="background:blue">
    <div class="up" style="background:yellow"/>
    <div class="down" style="background:red"/>
</div>

CSS：

.wrapper {
    width:50px;
    height:400px;
    background:blue;
    margin:1em;
}
.up {
    position:relative;
    top:100px;  /*I want this one 100px from the top of .wrapper*/
    height:100px;
}
.down {
    position:relative;
    top:200px;  /*I want this one 200px from the top of .wrapper*/
    height:50px;
}

Answer 1

position:relative与之前的div相关。

Div .up 的高度为100px，因此要在.up下直接放置 .down ，.down应包含top:100px。因此，{。1}} .down将把它放在200px以下.up，这不是你想要的.up只有高度100px。通过将.down的top:200px属性更改为top

来解决此问题

如果要相对于包装器定位它，请使用top:100px。

演示： http://jsfiddle.net/6wSAJ/274

Answer 2

你不需要设置顶部：xx;如果你只想堆叠黄色和红色修改您的HTML格式为'＆lt; div＆gt;＆lt; / div＆gt;'而不是'＆lt; div /＆gt;'

两个div的相对定位

2 个答案: