css - 位置の後の DIV:絶対

Question

私はと入れdivましclass="inner-box2"た。divclass="inner-box"

HTML:

 <div class="box">

   <div class="inner-box"></div>

   <div class="inner-box2"></div>

 </div>

CSS:

 .box {
     position: relative;
     width: 400px;
     height: 400px;
     border: solid 10px red;
  }

  .inner-box {
    border: solid 10px blue;
    position: absolute;
    height:150px;
    width:380px;

  }
   .inner-box2 {
    border: solid 10px green;
  }

今、私はdiv(inner-box2)後に表示する必要がありますdiv(inner-box)が、私のコードdiv(inner-box2)では下に表示されdiv(inner-box)ます。これを修正するには？オンラインデモを見る

Answer 1

要素を絶対位置より下に配置する場合は、絶対アイテムのスペースと存在を「スキップ」するのに必要な距離だけ次の要素を下に移動するマージンを追加できます。そうすれば、アイテムは依然として絶対アイテムの下にありますが、視覚的にはその下に表示されます。

Answer 2

これはあなたがhttp://jsfiddle.net/4bqzz/22/のために撮影しているものですか? 私はあなたの CSS を少し変更してから、ボックスを左に浮かせました。サイズ、ボーダーなどをいじることができます...しかし、それらがどこにあったかを示すためだけに、それらは非常に厚いと思います. そのようです：

     .inner-box {
      border: solid 5px blue;
      float:left;
      height:150px;
      width:360px;
  }
  .inner-box2 {
      border: solid 5px green;
      float:left;
      height:150px;
      width:20px;
  }

Answer 3

絶対配置アイテムにはtop|が必要です。bottom+ left| right定義されています。

Answer 4

この例で絶対配置要素を使用する場合は、次のようにします: http://jsfiddle.net/4bqzz/106/

.box
{
    position: relative;
    width: 400px;
    height: 400px;
    border: solid 10px red;
}
.inner-box
{
    border: solid 10px blue;
    position: absolute; 
    height: 150px;
    width: 380px;
}
.inner-box2
{
    border: solid 10px green;
    position: absolute;
    top: 170px;
    height: 210px;
    width: 380px;
}