將div跨過相對容器擴展爲頁面的全部寬度

我試圖將div擴展爲瀏覽器窗口的寬度，並將其封裝在定位爲div的relative中。將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; 
}

而對於我謹向

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

抑或是分裂的代碼這個CSS的這個部門我必須擴展？

.img-product { 
height: 360px; 
overflow: hidden; 
text-align: center; 
position: relative; 
}

img-product分部內的圖像（奶牛）的CSS代碼。

.img-product img { 
position: absolute; 
bottom: 0px; 
left: 0px; 
width: 100%; 
}

最後是網頁截圖。我想擴展到網頁的整個寬度的牛和橫幅。 enter image description here

來源

2014-06-19 WebDevDanno

你試過給.IMG產品寬度：100％？或.slider-home？ – designtocode

我不確定你想要做什麼和問題是什麼。我已經在jsfiddle中試過這段代碼，寬度爲：.overlay爲100％，將其容器擴展到窗口的整個寬度。 – LGT

@msbodetti我已經嘗試過，但無濟於事！ – WebDevDanno

看看這個，可能會對你有幫助。

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

來源

2014-06-19 10:01:13 user1853128

將div跨過相對容器擴展爲頁面的全部寬度

回答

相關問題