Исчезает ли пространство которое занимал элемент которому присвоено свойство position relative

Свойство position

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

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

В этом документе сейчас все элементы отпозиционированы статически, то есть никак.

Элемент с position: static ещё называют не позиционированным.

position: relative

Относительное позиционирование сдвигает элемент относительно его обычного положения.

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

Координаты

Для сдвига можно использовать координаты:

top – сдвиг от «обычной» верхней границы
bottom – сдвиг от нижней границы
left – сдвиг слева
right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

Свойства left/top не будут работать для position:static . Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

Абсолютное позиционирование делает две вещи:

Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.

Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

position:relative leaves an empty space

How to remove an empty space under main block (#page)?

13 Answers 13

Another trick which worked fine for me is to use a negative margin-bottom in the relative element that you have moved. No need to go with absolute positioning.

Similar (if not identical) to the solution I see now, from green.

Well, don’t use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can’t get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

I played around with the layout a bit, and I suggest that you change these three rules to:

Position

Значение по умолчанию. Статичное позиционирование. Любой элемент, добавленный на страницу, будет иметь это значение и будет расположен в нормальном потоке документа согласно контексту форматирования родительского элемента. Свойства left , right , top , bottom и z-index игнорируются.

Элемент со значением position: static не является позиционированным элементом. Это важный момент, потому что элементы с любым другим значением свойства position создают внутри себя контекст наложения и становятся опорными. Опорным элементом будем называть такой, относительно которого позиционируются дочерние элементы.

2. relative

Относительное позиционирование сдвигает элемент относительно его обычного положения.

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .Это смещение чисто визуальное и не затрагивает положение соседних элементов, кроме случая, когда элемент выходит за границы родителя, имеющего возможность прокрутки.

3. absolute

Абсолютное позиционирование делает две вещи:

Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
Координатыtop/bottom/left/rightдля нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.

Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.

Элемент получает display:block , который перекрывает почти все возможные display

Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство.

! Одновременное указание left/right , top/bottom

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

Браузер растянет такой элемент до границ.

! Внешним блоком является окно

ак растянуть абсолютно позиционированный блок на всю ширину документа?

Первое, что может прийти в голову:

Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!

Вы увидите, что голубой фон оканчивается задолго до конца документа.

Дело в том, что в CSS 100% относится к ширине внешнего блока («containing block»). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?

В данном случае им является так называемый (“«initial containing block»”), которым является окно, а не документ.

То есть, координаты и ширины вычисляются относительно окна, а не документа.

Может быть, получится так?

С виду логично, но нет, не получится!

Координаты top/right/left/bottom вычисляются относительно окна. Значение bottom: 0 – нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.

Если у элемента есть позиционированный предок, то position: absolute работает относительно него, а не относительно документа.

То есть, достаточно поставить родительскому div позицию relative , даже без координат – и заголовок будет в его правом-верхнем углу, вот так:

Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от float .

Используем position для размещения элемента управления:

Часть текста перекрывается. Кнопка более не участвует в потоке.

. Используем float для размещения элемента управления:

Браузер освобождает место справа, текст перенесён. Кнопка продолжает находиться в потоке, просто сдвинута.

4. fixed

Это подвид абсолютного позиционирования.

Позиционирует объект точно так же, как absolute , но относительно window .

Когда страницу прокручивают, фиксированный элемент остаётся на своём месте и не прокручивается вместе со страницей.

У такого позиционирования есть ряд особенностей:

Элемент ведёт себя как элемент с относительным ( relative ) позиционированием до тех пор, пока его родитель не будет прокручен до определённой границы. Как правило, эта точка совпадает с положением верхней границы нашего элемента, но может быть изменена с использованием свойства top .
Элемент остаётся «приклеенным» во время прокрутки родителя до тех пор, пока не «встретит» противоположную границу своего родителя.

5. sticky

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

такого позиционирования есть ряд особенностей:

Элемент ведёт себя как элемент с относительным ( relative ) позиционированием до тех пор, пока его родитель не будет прокручен до определённой границы. Как правило, эта точка совпадает с положением верхней границы нашего элемента, но может быть изменена с использованием свойства top .
Элемент остаётся «приклеенным» во время прокрутки родителя до тех пор, пока не «встретит» противоположную границу своего родителя.

Подсказки

Скопировать ссылку на секцию “Подсказки”

�� Как правило, если элементу с position: absolute или position: fixed не заданы ширина и высота, то значение этих величин высчитывается по количеству контента. Однако можно неявно заставить блок тянуться на всю ширину или высоту родителя, задав одновременно противоположные свойства ( left и right , или top и bottom ). Это будет работать, только если width и height будут иметь значение auto .

�� Если ширина задана явно (не auto ), а также заданы left и right , то для direction ltr приоритет отдаётся свойству left . Для rtl — свойству right .

�� Если высота задана явно (не auto ), а также заданы top и bottom , то приоритет отдаётся свойству top .

�� Если для абсолютно позиционированного элемента ( absolute или fixed ) задано смещение только по одной из осей (например, только top или только left ), то смещение по второй из осей высчитывается, исходя из расположения элемента, если бы он был позиционирован статично. В примере ниже блоку не задано положение по вертикали, поэтому его верхний край помещается в ту же точку, где находился бы при статичном позиционировании:

Разбор позиционирования в CSS

CSS

Понять, как работает свойство position в CSS может оказаться весьма запутанным делом для новичка.

Я помню, как испытывал свою удачу играя в CSS-рулетку, использовал разные комбинации свойств position, пока не получал примерно то, что хотел. Примерно. Также я помню времена, когда мне всё-таки не везло и в результате я создавал полную неразбериху.

Но оказывается, леди фортуна одобряет подготовку, поэтому перед тем, как испытать удачу в следующий раз, эта статья послужит козырем в вашем рукаве.

Далее будет описано упрощённое позиционирование CSS.

Если вам лень читать статью полностью, то просто воспользуйтесь шпаргалкой в конце статьи.

Есть два типа позиционирования

Позиционирование статического (static) типа и относительного (relative).

Статическое позиционирование содержит только одно значение position: static . Оно задано по умолчанию, поэтому вы редко видите его в параметрах.

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

Статическое позиционирование

Давайте избавимся от этой скукоты пораньше. Не смотря на то, что вы редко встретите объявление статической позиции в коде, нам стоит начать изучение позиционирования именно с этого.

Статическое позиционирование установлено по умолчанию для каждого элемента.

Относительное позиционирование

С относительным позиционированием вещи становятся куда интереснее.

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

Каждое позиционирование относительного типа может:

Быть сдвинутым из нормального потока позиционирования с помощью свойств смещения (offset properties), таких как top, right, bottom и left.
Создать условия для относительного позиционирования, которые позволяют размещать дочерние элементы с position: absolute относительно позиции их родителя.

Давайте рассмотрим поближе каждое из трёх относительных позиционирований.

Значение Relative

Возможно вы видели это раньше. Код выглядит следующим образом:

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

Внесём ясность. Когда вы используете свойства смещения для элемента со свойством position: relative , то место, которое он занимает в документе, не смещается.

Посмотрите на пример ниже.

Наш элемент сдвинут со своей оригинальной позиции с помощью свойств смещения.

Мы видим, что верх нашего элемента был сдвинут на 20 пикселей, относительно того, где он был расположен в нормальном потоке. Тоже самое было сделано для левой стороны.

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

Представьте, что у нашей коробки есть душа, которая может сдвинуться куда бы то ни было, но всегда относительно того места, где она была изначально.

Важно отметить, что когда вы применяете свойство position: relative к элементу, то, скорее всего, вы и не хотите применять к нему свойства смещения. В конце концов некоторые элементы хотят оставаться на своих местах.

Значение Absolute

Свойство position: absolute в основном делает то же самое, что и свойство position: relative , но с двумя ключевыми отличиями:

Элемент забирается из нормального потока и не занимает места.
Элемент позиционируется относительного ближайшего родительского элемента со свойством relative.

Мы забираем нашу коробку из нормального потока и сдвигаем её относительно ближайшего родительского элемента со свойством relative.

Мы создали оболочку со свойством position: relative для трёх наших коробок. Также мы изменили свойство нашей коробки на position: absolute . Обратите внимание на то, что место, которое мы занимали до этого, теперь сжалось, а две серые коробки теперь отображаются рядом.

position: absolute указывает на то, что вы хотите достать свой элемент из нормального потока, убрать занимаемое им место и сдвинуть его относительно ближайшего родительского элемента со свойством relative.

Значение Fixed

Теперь, когда мы знаем о свойстве position: absolute , то нам будем проще разобраться с fixed .

fixed представляет из себя то же самое, что и absolute , но с одной ключевой разницей:

Элемент позиционируется относительно окна просмотра.

Когда мы применили свойство position: fixed, наша коробка сдвинулась в левый верхний угол окна просмотра.Это значит, что даже если страница будет прокручиваться, то наша маленькая коробочка останется на своём месте. Когда мы применили свойство position: fixed , наша коробка сдвинулась в левый верхний угол окна просмотра.