css - 相対的に配置された要素に「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

top:#red の 520 は間違っています。トップ値として top:230px と書く必要があると思います..

Answer 2

top:520;#red ルールの最後に測定単位がありません。top:520px;

Answer 3

を削除topして書き込みmargin-top:-195pxます#red。

ここでデモ。

Answer 4

それは今解決されました、私は黄色の<div id="red"></div>前に配置しましたhttp://jsbin.com/IxAtOFA/12/edit divs

Answer 5

このコードを使用してください

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