在相对定位的元素上添加`div`

Question

我希望红色框位于箭头结束位置。 jsbin

<div id="wrapper">
<div id="blue"></div>
<div id="yellow1">y</div>
<div id="yellow2">y</div>
<div id="red"></div>
</div>


body{width:800px;}

#wrapper{position:relative;}

#blue{
float:left;
height:225px;
width:520px;
background:blue;
}

#yellow1,#yellow2{
position:relative;
width:250px;
height:200px;
margin:10px 0 20px 540px;
background:yellow;}

/*Not working*/
#red{
background:red;
position:absolute;
height:200px;
width:520px;
top:200;  
}

Answer 1

顶部：#red的520错了。你必须写上：230px作为最高价值我认为..

Answer 2

您在#red规则的top:520;末尾缺少一个度量单位 它应该像top:520px;

Answer 3

删除top并将margin-top:-195px写入#red。

Demo here.

Answer 4

使用此代码

http://jsbin.com/IxAtOFA/10/edit

#blue{
    float:left;
    height:225px;
    width:520px;
    background:blue;
  margin:5px;
}

#yellow1,#yellow2{
position:relative;
width:250px;
height:200px;
background:yellow;
float:right;
    margin:5px;
}

#red{
  background:red;
  height:200px;
  width:520px;
  float:left;
    margin:5px;
}

Answer 5

现在已解决，我将<div id="red"></div>放在黄色 divs之前，http://jsbin.com/IxAtOFA/12/edit