css - 位置后的DIV：绝对

Question

我把divwith放在withclass="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

绝对定位的物品需要有top| bottom+ left| right定义。

Answer 3

如果你想在这个例子中使用绝对定位的元素，这将是如何做到的：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;
}

Answer 4

这是你为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;
  }