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隐藏在fullwidth div后面怎么做呢？

Answer 1

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

位置相对（默认为静态）
将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;
}

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

1 个答案: