两个div的相对定位 [英] Relative positioning of two divs

问题描述

我做了这个小提琴，我期待红色的div位于黄色的正下方。他们不是。如何我相对于 wrapper 放置<向上和向下 c>？

I made this fiddle, I am expecting the red div to be positioned directly below the yellow one. They are not. How can I position both the div up and down relative to wrapper?

猜测应该很简单，但我不能让它工作。 我想我需要使用相对。

Guessing it should be simple, but I can't get it to work. I think I need to use relative. The 'bars' are time lines and 'float around' freely.

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

推荐答案

位置：相对与上一个 div 有关。

Div .up 的高度为100像素，因此要放置 .down 正下方.up，.down应包含 top：100px 。因此，.down会将 top：200px 放在.up下面200px，这不是你想要的.up只有高度100px。将顶部属性更改为 top：100px

Div .up has height 100px, so to place .down directly below .up, .down should contain top:100px. Therefore, top:200px on .down will place it 200px below .up, which is not what you want as .up only has height 100px. Solve it by changing top attribute of .down to top:100px

如果要相对于wraper定位它，请使用 position：absolute 。

If you want to position it relative to wraper, use position:absolute.

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

这篇关于两个div的相对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！