헤더 및 단락은 IK

Question

정보

위 벤 이미지 뒤에 숨어? 웰 스터링 기념일?

#navigation { 
height: 810px; 
width: 884px; 
} 

#navigation h1 { 
padding-top: 10px; 
padding-left: 20px; 
font-size: 18px; 
} 

#navigation p { 
padding-left: 20px; 
} 

#home-block, #info-block, #prices-block, #contact-block { 
position: relative; 
    float: left; 
    width: 440px; 
    height: 300px; 
    background: #e7e8d9; 
} 

#home-block, #prices-block { 
border-right: 4px solid #fff; 
} 

#home-block, #info-block { 
border-bottom: 4px solid #fff; 
} 

.a { 
position: absolute; 
    z-index: 1; 
top: 0px; 
left: 0px; 
} 

.b { 
position: absolute; 
top: 0px; 
left: 0px; 
} 

나는 jQuery로 페이딩 이미지를 창조하고 싶었다. 이것은 효과가 있었지만 지금은 머리글과 단락이 이미지 뒤에 숨어 있습니다. 이것을 테스트 할 수 있습니다 link text

다른 세 섹션과 마찬가지로 사진 아래에 머리글과 단락을 넣고 싶습니다. 어떻게 준비해야합니까? 감사합니다.

Answer 1

신속하고 더러운 솔루션은

#home-block > a { 
    display: block; 
    height: 200px; 
} 

하지만 이미지의 크기가 변경되었을 경우이 중단됩니다. (자주 바뀌지는 않겠지 만)

Answer 2

<h1>에 margin-top을 입력하면 약 200px로 작동합니다. 문제는 이미지를 절대적으로 배치 할 때 더 이상 <div>을 포함하는 실행중인 컨텐트에 기여하지 않는다는 것입니다. 그것은 그들이 전혀없는 것처럼 보입니다.