全屏宽度子div与位置绝对是隐藏其他元素

I want to create a div that's wider than its parent, and i found many solutions. Almost all of them say something that looks like this:

我想创建一个比它的父更宽的div,我找到了很多解决方案。几乎所有人都说出这样的话:

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

(for example: How to expand child <div> with 100% of body width?)

(例如:如何以100%的体宽扩展子

This is indeed a solution, but there is only one little problem.

这确实是一个解决方案,但只有一个小问题。

situation: (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>

In this example, the second normal div is hiding behind the fullwidth div, because the fullwidth is absolute positioned.

在此示例中,第二个普通div隐藏在全宽div之后,因为全宽是绝对定位的。

So, how can you do this without having the divs hide behind the fullwidth div?

那么,如果没有div隐藏在全宽div之后你怎么做呢?

1 个解决方案

#1

You need to make two changes to the "normal div":

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

Position relative (the default is static)

位置相对(默认为静态)

Set z-index below that of the absolute positioned div

将z-index设置为绝对定位div的z-index

And one change to the absolute div (set its z-index below the "normal" div).

并且一个更改为绝对div(将其z-index设置为低于“normal”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;
}

#1