Заголовок и абзац прячутся за изображением

Question

Инфо

Wie ben ik?Welke herstellingen Доу ик?

#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.Это сработало, но теперь мой заголовок и абзац скрываются за изображением.Вы можете проверить это на тексте ссылки

Я хочу, чтобы мой заголовок и абзац под картинкой, как и остальные 3 разделаКак мне это устроить?Спасибо!

Answer 1

Быстрое и грязное решение -

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

, но оно сломается, если размер вашего изображения изменится.(Хотя, похоже, ты не будешь так часто менять.)

Answer 2

Если вы дадите вашему <h1> a margin-top около 200 пикселей, оно должно работать.Проблема в том, что когда вы делаете изображения абсолютно позиционированными, они больше не вносят свой вклад в работающий контент внутри, содержащий <div>;как будто их вообще нет.