[CSS] Header and paragraph hiding behind image

Question

Hi,

<div id="navigation">
  <div id="home-block">
        <a href="info.html">
            <img src="images/ram.jpg" alt="ram-geheugen" class="a" />
            <img src="images/ram_alt.jpg" alt="ram-geheugen" class="b" />
        </a>
        <h1>
            <a href="info.html" class="fp">Info</a>
        </h1>
        <p>
            Wie ben ik? Welke herstellingen doe ik?
        </p>
 </div>
</div>

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

I wanted to create a fading image with jQuery. This worked, but now my header and paragraph are hiding behind the image. You can test this on link text

I want my header and paragraph underneath the picture, just like the other 3 sections. How do I arrange this? Thank you!

Answer 1

A quick and dirty solution is

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

but this will break if your image's size is changed. (Though it doesn't look like you'll change that frequently.)

Answer 2

If you give your <h1> a margin-top of about 200px it should work. The problem is that when you make the images absolutely positioned, they're no longer contributing to the running content inside that containing <div>; it's as if they're not there at all.