div 出现在另一个绝对定位的 div 之后，而不是在下面答案

【问题标题】：Div to appear after another absolute positioned div, not underneathdiv 出现在另一个绝对定位的 div 之后，而不是在下面
【发布时间】：2014-11-04 00:19:22
【问题描述】：

我知道关于这个主题还有其他问题，但我似乎无法解决这些问题。

我在另一个 div 中有一个 div。这个内部 div 使用绝对位置扩展到它的容器 div 之外。接下来的 div <div class="text"> 落后于绝对定位的 div。我希望它在它之后出现，所以它是可见的。

您可以在这个小提琴中看到.text 类被绝对定位的.child 类阻止：http://jsfiddle.net/0m8aynta/2/

绝对定位 div 的高度各不相同，所以我不能只将 margin-top 设置为 <div class="text">

我愿意接受任何建议来实现这一点，但我不想使用 javascript。

下面是代码，但看看小提琴。

<div class="container">
  <h1>Test page</h1>
    <div class="child">
      <div class="inner">testing to see if it can expand beyond its parent</div>
    </div>
  <div class="text">lorem ipsum doodle day yo</div>
</div>

.container {
    width:600px;
    height:600px;
    background:yellow;
    margin:0 auto;
    padding:1em;
}
.child {
    background:red;
    padding:1em;
    margin: 0 -500%; 
    padding: 0.5em 500%;
}
.inner {
    margin:0 auto;
    width:600px;
}

使用 margin: 0 -500%; padding: 0.5em 500%; 可以：http://jsfiddle.net/0m8aynta/9/

【问题讨论】：

如果你只想要一个全宽的 div，只需关闭容器并在全宽 div 之后打开一个新容器。 - jsfiddle.net/0m8aynta/3
Full Width Browser Bars
@SalmanA 有很多解决方案，我已经推荐了两个。
我的错，我在看问题，而不是意图。
@Paulie_D 全宽浏览器栏解决了这个问题，谢谢。我以前应该看过的。

标签： html css

【解决方案1】：

使用-margin 并添加+padding

.container {
  width: 600px;
  height: 600px;
  background: yellow;
  margin: 0 auto;
  padding: 1em;
}
.child {
  background: red;
  padding: 1em;
  margin-left: -24px;
  width: 100%;
  padding-right: 24px;
}
.inner {
  margin: 0 auto;
  width: 600px;
}

test
<div class="container">
  <h1>Test page</h1>
  <div class="child">
    <div class="inner">testing to see if it can expand beyond its parent</div>
  </div>
  <p>lorem ipsum doodle day yo</p>
</div>

【讨论】：

【解决方案2】：

采纳 Paulie_D 的建议，只需关闭 .container div，然后放置 .text div：

JSFiddle

HTML：

test
<div class="container">
    <h1>Test page</h1>
    <div class="child">
        <div class="inner">testing to see if it can expand beyond its parent</div>
    </div>
</div>
<div class="text">lorem ipsum doodle day yo</div>

CSS：

.container {
    width:600px;
    height:600px;
    background:yellow;
    margin:0 auto;
    padding:1em;
}
.child {
    background:red;
    padding:1em;
    position: absolute;
    right:0;
    left:0;
}
.inner {
    margin:0 auto;
    width:600px;
}

【讨论】：