Div出現在另一個絕對定位的div後面，不在

Question

我意識到有關於這個主題的其他問題，但我似乎無法讓這些工作。

我有另一個div內的div。這個內部div使用絕對位置延伸到它的容器div之外。 下一個<div class="text">的div落後於絕對定位div。我希望它能夠如此，所以它是可見的。

你可以在這個小提琴的.text類被封鎖的絕對看定位.child類：http://jsfiddle.net/0m8aynta/2/

絕對定位的div的高度而變化，所以我不能只是設置一個邊距來<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

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

Answer 2

以Paulie_D的建議下，只需關閉.container格，然後將.text格：

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