CSS 포지셔닝이 작동하지 않습니다.

Question

지난 2 시간 동안이 문제로 악화되었습니다. 믿을 수 없군.

머리글 배경, 중간 반복되는 흰색 배경 및 봇 배경의 세 가지 구성 요소가있는 간단한 왼쪽 열을 만듭니다. 바보 같은 이유 때문에 중간 반복되는 배경이 머리글을 겹쳐 유지합니다. "배경 위치"를 사용하면 아래로 내려 가지 않습니다.

.leftcolumn .block{ 

background-color:#FFFFFF; 

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_center.png);[/url] 
background-position:0px 10px; 
background-repeat: repeat-y; 

width:205px; 
} 


.leftcolumn .block .wrap { 

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_header.png);[/url] 
background-repeat: no-repeat no-repeat; 
width:205px; 
padding-left:0px; 
padding-top:10px; 

} 


.leftcolumn .block .bot { 
background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_bot.png);[/url] 
background-repeat: no-repeat repeat; 
background-position: 0px 51px; 
} 

내 HTML :

 <div class="block"> 

      <div class="wrap"> 

      <div class="navigation"> 
       <ul> 
       <li><a href="#" title="">Link 1</a></li> 
       <li><a href="#" title="">Link 2</a></li> 
       <li><a href="#" title="">Link 3</a></li> 

       </ul> 
      </div> 
      </div> 
      <span class="bot"> </span> 

     </div> 

Answer 1

background-position이 이미지를 얻기 시작이 경우에만, 실제 요소를 이동할 wont't

여기 내 CSS 코드입니다. 예를 들어 스프라이트 이미지를 사용하는 경우 백그라운드 위치를 설정하여 오버 상태를 설정 한 다음 다른 상태로 설정합니다. 실제 위치 지정 (예 : top, bottom, left 및 right)을 사용해 보거나 여백을 사용하여 원하는대로 배치 할 수 있습니다. iamserious '덧글에 관해서는, 헤더에 내용과 display:block;을 추가하는 것도 도움이 될 것입니다.

Answer 2

이게 당신이 찾고 있는게 있나요? 당신은 헤더에 어떤 내용이없는 경우

http://jsfiddle.net/7TVkh/