Здесь Вы можете лицезреть, как 2-ой блок перекрывает 1-ый блок, но самое интересное, что делает он это с помощью: position: relative. Согласно правилам, position: relative - это положение элемента устанавливается относительно родителя, иными словами, контейнера, в который вложен элемент.
Если родительский элемент явно не задан, то в качестве него выступает окно браузера. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемого параметра.
Все верно, так и есть, но, если поднять элемент (top: -100px;), то после него остается некое объявленное под него пространство, поэтому важно поднять и объявленное пространство (margin-bottom: -100px;). Без этого, после поднятого элемента остается пустота. Вот наглядный пример правильного перекрытия:
Кстати, в разных браузерах перекрытие происходит по разному!
Вот, как выглядит код:
<div style="border: #33FF33 3px dotted; height: 100px;">1-ый блок</div>
<div style="position: relative; top: -100px; margin-bottom: -100px; z-index: 5; border: #00FFFF 3px dotted; height: 100px; padding-left: 55px;">2-ой блок</div>
<div style="border: #FF00CC 3px dotted; height: 100px;">3-ий блок</div>
Комментарии