绝对定位后的DIV元素

Question

我往 class="inner-box" 的 div 后面放了一个带有 class="inner-box2" 的 div。

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）下面。如何解决？请参见在线演示。

- BaTmaN

---

不可能的。绝对定位的元素在文档布局流之外。你为什么需要将.inner-box绝对定位呢？ - Mattias Buelens

Answer 1

如果你想在绝对定位元素下方放置一个元素，可以添加 margin 属性来使下一个元素向下偏移一定距离，以达到避开绝对定位元素的空间和存在。这样在代码中，该元素仍在绝对定位元素下方，但在视觉上看起来是在其下方。

- Walls

Answer 2

如果你想在这个例子中使用绝对定位的元素，可以按照以下步骤进行操作：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;
}

- user1247034

Answer 3

你是想要实现这个效果吗 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;
  }

- Taraes

Answer 4

绝对定位的元素需要定义top|bottom + left|right。

- Diodeus - James MacFarlane

---

我认为这只是为了规范一些IE的怪癖。不过，它并没有真正解决发帖者的问题。 - Mattias Buelens