0

フッターの上の 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 の例

4

2 に答える 2

0

その画像を別の 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-19T22:00:29.927 に答える
0

作業しているコードを再考する必要があります。画像をコンテンツ本体の背景画像に設定しているため、フッターの位置がコンテンツ本体の上に固定されているため、画像は常にフッターの後ろになります。画像を別の 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-19T22:01:32.030 に答える