div의 위의 바닥 글 겹침 이미지를 방지하는 방법

Question

바닥 글 위의 div 안에있는 오른쪽 하단 모서리에 배치 된 이미지가 바닥 글에 겹치지 않도록하려합니다. 오른쪽 하단 이미지가있는 컨테이너에 z- 인덱스를 적용했지만 바닥 글에 여전히 겹쳐져 있습니다.

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

같은 외모를 적용하고 있습니다. 이미지 자체에 공백의 막대가 있으므로

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 : 나는 http://fiddle.jshell.net/CjXxk/4/show/ 찾고 있어요

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