1

我做了这个小提琴，我希望红色 div 位于黄色 div 的正下方。他们不是。如何定位 divup和downrelative wrapper？

猜测它应该很简单，但我无法让它工作。我想我需要使用 relative。“条”是时间线，可以自由“浮动”。

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;
}
4

2 回答 2

4

position:relative涉及到前面div。

Div .up的高度为 100px，因此要将.down直接放在 .up 下方，.down 应该包含top:100px. 因此，top:200pxon .down 会将其放置在 .up 下方 200px 处，这不是您想要的，因为 .up 只有高度 100px。top通过将.down 的属性更改为来解决它top:100px

如果要相对于包装器定位它，请使用position:absolute.

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

于 2013-01-28T17:27:11.847 回答
0

你不需要设置 top:xx; 如果您只想堆叠黄色和红色，请将您的 html 修改为格式 '<div></div>' 而不是 '<div />'

于 2013-01-28T17:40:58.600 回答