Позиционирование блока через position:relative оставляет пустое пространство. Как убрать?

Половину дня потратил на решение проблемы с пустым пространством, возникающим вследствие позиционирования блока с помощью position:relative. В моем случае я перекрывал часть одного фона другим (такая вот дизайнерская задумка). Проблема заключалась в том, что после перемещения блока вверх, под ним появлялось пустое пространство, равное по высоте значению top.

По некоторым ссылкам из поисковика натыкался на решение, согласно которому необходимо было присвоить данному блоку свойство margin с отрицательным значением, равным значению top. Условный пример:

Пропишу стили через style, чтобы не тратить время зря :)

В общем в моем случае это не помогло и я решил попробовать старый добрый способ спозиционировать блок с помощью обертки, значение postion у которой тоже relative, но при этом у нужного нам блока данное свойство необходимо изменить на absolute.

Проблема с пустым пространством у меня была решена. Надеюсь, что и вам это может помочь.

3 Comments

  1. Роман

    Все дело в том, что при относительном позиционировании (relative) элемент физически не покидает своего положения, а перемещается его клон/дубль/фантом, а место, которое элемент занимал, все еще занимает, просто он сам скрыт, а при абсолютном позиционировании, элемент перемещается физически, т.е. выпадает из потока и место которое он занимал, больше не занимает и все элементы сдвигаются, будто его нет, но тогда лучше родителю этого элемента прописывать относительное позиционирование, чтоб элемент не уехал куда-нибудь, неожиданно

  2. Елена

    Спасибо большое за статью! Вы мне очень помогли. Весь интернет перелопатила, помогло только Ваше решение.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *