En-tête et le paragraphe se cache derrière l'image

Question

Infos

Wie ben ik? Welke herstellingen doe ik?

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

Je voulais créer une image avec la décoloration jQuery. Cela a fonctionné, mais maintenant mon en-tête et le paragraphe se cachent derrière l'image. Vous pouvez tester ceci sur link text

Je veux mon en-tête et le paragraphe sous l'image, tout comme les 3 autres sections. Comment puis-je organiser cela? Merci!

Answer 1

Une solution rapide et sale est

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

mais cela cassera si la taille de votre image est modifiée. (Bien qu'il ne semble pas que vous changerez cela fréquemment.)

Answer 2

Si vous donnez à votre <h1> un margin-top d'environ 200px cela devrait fonctionner. Le problème est que lorsque vous placez les images en position absolue, elles ne contribuent plus au contenu en cours d'exécution dans celui contenant <div>; c'est comme s'ils n'étaient pas là du tout.