标题和段落隐藏在图像后面

Question

                信息             

            

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

我想用jQuery创建一个淡入淡出的图像。这有效，但现在我的标题和段落隐藏在图像后面。您可以在link text

上对此进行测试

我希望我的标题和段落位于图片下方，就像其他3个部分一样。我该如何安排？ 谢谢！

Answer 1

快速而肮脏的解决方案

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

但如果您的图片尺寸发生变化，这将会中断。 （虽然看起来你不会经常改变它。）

Answer 2

如果您的<h1> margin-top大约为200px，那么它应该有效。问题在于，当您使图像绝对定位时，它们不再对包含<div>的内部的运行内容做出贡献;就好像他们根本就不存在一样。