2012-02-26 60 views
1

在這裏,我有兩個設置爲兩個CSS背景圖像的div。 我試圖讓div重疊,所以我可以有一個虛線的圖案覆蓋。 我覺得我正確的做法,但錯誤的div正在前進。 任何想法爲什麼發生這種情況?我如何覆蓋div背景?

這裏的網站:http://designobvio.us/portfolio/body.html

HTML:

<section class="bodySection"> 
<div id="body-wrapper" class="container_12"> 

    <div id="left-container" class="grid_5"> 
    <div class="content"> 
    </div> 
    </div><!--end of left-container-overlay--> 
</div><!--end of left-container--> 
</div><!--end of body-wrapper--> 

</section><!--end of bodySection--> 

我的CSS:

#left-container { 
    background:url(../img/sliderBG.png)transparent repeat; 
    width:400px; 
    height:100%; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
    position:absolute; 
    overflow:hidden; 
    display:block; 
    height:100%; 
    top:0; 
    z-index:5; 
} 
#left-container .content { 
    background:url(../img/Me.jpg) repeat-y; 
    width:400px; 
    height:100%; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
    position:absolute; 
    overflow:hidden; 
    display:block; 
    height:100%; 
    top:0; 
    z-index:1; 
} 

謝謝你們!

回答

4

我的確認爲你的問題在於你在另一個嵌套的重疊元素之一,而他們通常應該只是兄弟姐妹。

看到這個搗鼓一個辦法做到這一點:http://jsfiddle.net/GCprD/

+0

非常感謝。我是個白癡 – 2012-02-26 15:01:48

2

這不是不可能與你的HTML結構做到這一點,但!

http://jsfiddle.net/GCprD/1/

但我同意,M90的解決方案是更好的。