Убираем отступ снизу position: relative

Автор: Aport Четверг, Январь 22nd, 2015 Нет комментариев

Рубрика: Разное

Здесь Вы можете лицезреть, как 2-ой блок перекрывает 1-ый блок, но самое интересное, что делает он это с помощью: position: relative. Согласно правилам, position: relative — это положение элемента устанавливается относительно родителя, иными словами, контейнера, в который вложен элемент.

Если родительский элемент явно не задан, то в качестве него выступает окно браузера. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемого параметра.

Все верно, так и есть, но, если поднять элемент (top: -100px;), то после него остается некое объявленное под него пространство, поэтому важно поднять и объявленное пространство (margin-bottom: -100px;). Без этого, после поднятого элемента остается пустота. Вот наглядный пример правильного перекрытия:

1-ый блок
2-ой блок
3-ий блок

Кстати, в разных браузерах перекрытие происходит по разному!

Вот, как выглядит код:

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты