具有绝对位置的全屏宽度子 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

你需要对“普通的div”做两处修改：

1. 相对位置（默认为静态）
2. 将 z-index 设置为低于绝对定位 div 的 z-index

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