如何避免頁腳在div上方重疊圖像

Question

我想避免我的頁腳重疊放置在頁腳上方div底部右下角的圖像。我已將z-index應用於具有右下圖像的容器，但它仍與頁腳重疊。

的CSS我申請這個樣子的

.content_body 
    { 
    margin: 0 auto; 
    width: 100%; 
    overflow: hidden; 
    padding-top: 30px; 
    background: #E6E6E0; 
    color: #555; 
    font-family: Tahoma, Arial, sans-serif; 
    font-size: 14px; 
    min-height: 800px; 
    background-image: url(http://types4u.org/Tomike/temp/images/saturation.png) ; 
    background-position: right bottom; 
    background-repeat: no-repeat; 
    z-index: 1; 
    } 


     #footer 
     { 
     background: url(http://types4u.org/Tomike/temp/images/bg2.jpg) #E6E6E0; 
     color: white; 
    font-family: Lato, Tahoma, Arial, sans-serif; 
    font-size: 13px; 
    line-height: 1.5em; 
    padding: 40px 50px 50px 50px; 
    clear: both; 
    border-top: solid #000033 5px; 
    } 

    .design_by 
     { 
    float:  right; 
    font-size: 2.4em; 
    font-family: 'tangerine', cursive; 
    color:  white; 
    } 

    .copyright 
    { 
    float:  left; 
    font-size: 2.4em; 
    font-family: 'tangerine', cursive; 
    color:  white; 
     } 


<div class="content_body"> 
    hello 
</div> 

<div id="footer"> 
    <div class="copyright"> 
     <a href="#">mine.com</a> &copy copyright 2013 all rights reserved. 
    </div> 

    <div class="design_by"> 
     Design by <a href="http://types4u.org" target="http://types4u.org">types 4 u</a> 
    </div> 
    </div> 

jsfiddle例

Answer 1

做在一個單獨的div圖像和相對定位的父之內給它絕對定位。

http://jsfiddle.net/CjXxk/10/

圖片下方的空白實際上是因爲有空白的圖像本身在酒吧。

.saturation-image 
{ 
    width: 500px; 
    height: 300px; 
    background-image: url(http://types4u.org/Tomike/temp/images/saturation.png); 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
} 

Answer 2

您將不得不重新考慮您正在使用的代碼。由於您將圖片設置爲內容主體的背景圖片，因爲頁腳位置固定在內容主體的頂部，所以它始終位於頁腳後面。你將不得不把圖像放在一個單獨的div中。

我將你的小提琴更新爲下面的代碼。見這裏：http://jsfiddle.net/CjXxk/13/

<div class="content_body"> 
    hello 
</div> 

<div class="picture"> 
    <img src="http://types4u.org/Tomike/temp/images/saturation.png" /> 
</div> 

<div id="footer"> 
    <div class="copyright"> 
     <a href="#">mine.com</a> &copy copyright 2013 all rights reserved. 
    </div> 

    <div class="design_by"> 
     Design by <a href="http://types4u.org" target="http://types4u.org">types 4 u</a> 
    </div> 
</div> 

然後是CSS：

.picture { 
    position:fixed; 
    bottom:0; 
    right:0; 
} 

.content_body 
    { 
    margin: 0 auto; 
    width: 100%; 
    overflow: hidden; 
    padding-top: 30px; 
    background: #E6E6E0; 
    color: #555; 
    font-family: Tahoma, Arial, sans-serif; 
    font-size: 14px; 
    min-height: 800px; 
    } 

#footer 
    { 
    background: url(http://types4u.org/Tomike/temp/images/bg2.jpg) #E6E6E0; 
    color: white; 
    font-family: Lato, Tahoma, Arial, sans-serif; 
    font-size: 13px; 
    line-height: 1.5em; 
    padding: 40px 50px 50px 50px; 
    clear: both; 
    border-top: solid #000033 5px; 
    } 

.design_by 
    { 
    float:  right; 
    font-size: 2.4em; 
    font-family: 'tangerine', cursive; 

    color:  white; 
    } 

.copyright 
    { 
    float:  left; 
    font-size: 2.4em; 
    font-family: 'tangerine', cursive; 
    color:  white; 
    }