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

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

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

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

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

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

14 комментариев

  1. Роман

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

  2. Елена

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

  3. vvo

    Ерунда какая-то. Если мне нужно относительное позиционирование в след за изменяющимся блоком, например, по высоте . Тут я его засовываю в абсолютное и теряю относительность. В чем помощь то? Чего тогда сразу абсолютным не сделать?

    • Sergey

      Если сразу его спозиционировать абсолютно, то отсчет координат будет вестись от края окна браузера и при ресайзе этот элемент может оказаться везде где угодно, но не там, где надо. А если его родителю дать position: relative, то его координаты будут высчитываться относительно родителя.
      И если вы еще раз прочитаете текст, то убедитесь, что я блок с абсолютным позиционированием помещал в родителя с position: relative, но не наоборот.

  4. Добрый день!
    помогите, пожалуйста, решить такую же задачу

    в родительском диве
    находится два дочерних

    Компания «УкрМашСервис» © 2019 все права защищены

    Тут иконки соц сети

    в красном квадрате на скрине должны отображаться соцсети
    http://prntscr.com/mxcw04

    но они не отображаются(((

    файл стилей:

    @media all and (max-width: 400px) {

    #footerBottom{
    overflow:visible;
    position:relative;
    height: 180px;
    z-index: 10;
    }

    #footerBottom .creator:first-child{
    position: absolute;
    z-index: 20;
    }

    #footerBottom .social:last-child{
    position: absolute;
    left: 150px;
    top: 120px;
    z-index: 30;
    }

    }

      • Бека

        здраствуйте ! можете помочь file:///C:/Users/Алтынбек/Desktop/japjana/pro.html# там я дал маржин блок отступал ! но там должно было с оюеих сторон видно фон но проблема в том что там справа и слева пустое белое пространство

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

Ваш адрес email не будет опубликован.