将Div延伸过相对容器到页面的整个宽度

Question

我正在尝试将div扩展到浏览器窗口的宽度，并将其包含在位于relative的{​​{1}}中。

以下是div标记：

HTML

以下是容器的代码：

<section class="slider-home">

<div class="overlay"> </div>
<div class="img-product">
    <div class="strapbox-product">
        <h1>
            Farm & Estates
        </h1>
    </div>
    <img src="/assets/img/products/farm-estates.jpg"></img>
</div>

</section>

我希望扩展的部门代码

.slider-home {
height: 360px;
overflow: hidden;
position: relative;
}

或者我必须扩展这个部门的CSS吗？

.overlay {
position: absolute;
width: 100%;
height: 360px;
z-index: 2;
}

.img-product { height: 360px; overflow: hidden; text-align: center; position: relative; } 区内的图像（奶牛）的CSS代码。

img-product

最后是网页的截图。奶牛和横幅我想扩展到网页的整个宽度。

Answer 1

看看这个，可能对你有帮助。

HTML：

<section class="slider-home">

<div class="overlay"> </div>
<div class="img-product">
    <div class="strapbox-product">
        <h1>
            Farm & Estates
        </h1>
    </div>
    <img src="http://2.bp.blogspot.com/-cr_BxrxmKrE/TfjZlcf8VBI/AAAAAAAAA5g/JPv6K6XhW0c/s1600/34066_457614643272_609613272_5962233_1924402_n.jpg"></img>
</div>

</section>

CSS：

.slider-home,.img-product,.strapbox-product{
    width:100%;
    position:relative;
}

.strapbox-product h1{
    width:100%;
    text-align:center;
    position:absolute;
    top:100px;
    z-index:999999;
    display:block;
}
.img-product img{
    width:100%; 
    height:100%;
}

.overlay{
    width:100%;
    height:50px;
    background:black;
    opacity:0.4;
    position:absolute;
    top:100px;
    z-index:999999;
}

Fiddle Demo