如何避免页脚在div上方重叠图像

我想避免我的页脚重叠放置在页脚上方div底部右下角的图像。我已将z-index应用于具有右下图像的容器，但它仍与页脚重叠。如何避免页脚在div上方重叠图像

的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例

来源

2013-01-19 user1843335

我看http://fiddle.jshell.net/CjXxk/4/show/ 你是说你想让这个男人的照片在页脚之上？ – Charles

@CharlesTian是的。 – user1843335

做在一个单独的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; 
}

来源

2013-01-19 22:00:29 Banath

您将不得不重新考虑您正在使用的代码。由于您将图片设置为内容主体的背景图片，因为页脚位置固定在内容主体的顶部，所以它始终位于页脚后面。你将不得不把图像放在一个单独的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; 
    }

来源

2013-01-19 22:01:32 Charles

如何避免页脚在div上方重叠图像

回答

相关问题