html - 具有绝对位置的全屏宽度子 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 隐藏在全 Angular div 后面，因为全 Angular 是绝对定位的。

那么，如果不让 div 隐藏在全 Angular div 后面，你怎么能做到这一点呢？

Answer 1

您需要对“普通 div”进行两处更改:

1. 相对位置(默认为静态)
2. 将 z-index 设置为低于绝对定位的 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;
}