Question

我意识到关于这个主题还有其他问题，但我似乎无法让这些问题起作用。

我在另一个div中有一个div。这个内部div使用绝对位置延伸到它的容器div之外。下一个<div class="text">的div落后于绝对定位的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/

Answer 1

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

Answer 2

使用-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>

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

2 个答案: