Почему эти элементы не перекрываются? - PullRequest
Новая
       9

Почему эти элементы не перекрываются?

1 голос
/ 14 июля 2011

У меня есть следующая разметка: 

<div class="promo">
    <p class="preview"><a href="#"><img src="preview.png"></a></p>
    <p class="caption"><a href="/">Project caption</a></p>
</div>

.promo .preview img {
    display: block;
    margin: 0 auto;
    width: 80%;
}

.promo .caption {
    background: white;
    padding: 0.50em;
    margin-top: -2.00em;
}

И вот что я получаю:

Overlapping result

Почему элемент заголовка не перекрывает изображение? Он перекрывает .preview div без изображения в нем. Он также не перекрывается, когда изображение имеет display: inline.

1 Ответ

2 голосов
/ 14 июля 2011

Заставить заголовок увеличиваться с position: relative; z-index: 2;.

Поведение при наложении непредсказуемо для статически расположенных элементов.Свойство z-index позволяет четко указать, хотите ли вы его выше или ниже другого элемента.Свойство position обязательно для работы.

...