Question

我将div与class="inner-box2" div放在class="inner-box"之后<div class="box"> <div class="inner-box"></div> <div class="inner-box2"></div> </div>。

HTML：

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

CSS：

div(inner-box2)

现在，我需要在div(inner-box)之后显示div(inner-box2)，但在div(inner-box)下的我的代码{{1}}中显示。怎么解决这个问题？见Online Demo

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

DIV后的位置：绝对

4 个答案: