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;
    }

如何避免div中的页脚重叠图像

2 个答案: