全屏寬度的子div與位置絕對是隱藏其他元素

Question

我想創建一個比它的父母更寬的div，並且我找到了很多解決方案。 幾乎所有的人說些什麼，看起來像這樣：

position:absolute; 
left:0; 
right:0; 

（例如：How to expand child <div> with 100% of body width?）

這的確是一個解決方案，但只有一個小問題。

情況： （jsfiddle）

<style> 
.parent 
{ 
    width:70%; 
    padding: 1%; 
} 
.fullwidth 
{ 
    position:absolute; 
    left:0; 
    right:0; 
} 
</style> 
<div class="parent"> 

    <div> 
     <h1> 
      This is a normal div. 
      This text is visible 
     </h1> 
    </div> 

    <div class="fullwidth"> 
     <h1> 
      This is a full width div. 
     </h1> 
    </div> 

    <div class="normal-div"> 
     <h1> 
      This is a normal div 
      This text is hiding behind fullwidth div 
     </h1> 
    </div> 
</div> 

在這個例子中，第二正常DIV是隱藏的全角的div後面，這是因爲全角是絕對定位。

那麼，你怎麼能做到這一點，而不必讓div隱藏在全寬div之後呢？

Answer 1

您需要進行兩項更改爲「正常格」：

1. 相對位置（默認爲靜態）
2. 組Z指數低於絕對定位的div的

然後改變絕對div（將其z-index設置爲低於「正常」div）。

http://jsfiddle.net/gx4p2red/3/

.fullwidth 
{ 
    position:absolute; 
    left:0; 
    right:0; 

    /*Testing only*/ 
    background-color: green; 
    z-index: 0; 
} 

/*Testing only*/ 
.normal-div 
{ 
    background-color:red; 
    position: relative; 
    z-index: 1; 
}