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

position: static;

 
Без позиционирования ("position: static"). 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

position: relative; top: 10px;

 h2 
Заголовок сдвинут на 10px вниз. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

 h2 
Заголовок сдвинут на 10% влево. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

position: absolute;

 h2 
Заголовок в правом-верхнем углу документа. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

 div 
10px от границ

1 2 3

div class="foo1" style="background-color: #ff88ff;">/div> div class="foo2" style="background-color: #ff33ff; position: relative; top: 100px;">/div> div class="foo3" style="background-color: #ff88ff;">/div>

1 2 3 4 5 6 7 8

.foo1, .foo2, .foo3 { width: 100px; height: 100px; margin-right: 15px; display: inline-block; }

        .parent < background-color: gray; width: 400px; >.child < height: 50px; >.child-one < background-color:aqua; >.child-two < background-color: honeydew; >.child-three 
First Child
 
Second Child
 
Third Child
 

Нормальное позиционирование: static

Нормальное (статичное) позиционирование — это обычное поведение блочных элементов в том порядке, в котором они прописаны в коде сверху вниз. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определённых событиях на веб-странице в сценариях JavaScript или в эффектах CSS для возврата к начальному значению (например, в свойстве :hover).

Для нормального позиционирования характерны следующие особенности:

• элементы выводятся в том порядке, как они описаны в коде
• свойства left, right, top, bottom, z-index не работают, применять их нет смысла

Наша заготовка как раз использует нормальное позиционирование и здесь всё понятно.

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

Относительное позиционирование записывается так – position: relative. Изменяет положение элемента от его исходного расположения. Координаты задаются такими же свойствами, как и при абсолютном позиционировании — left, right, top, bottom. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остаётся место.

Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остаётся нетронутым. Блок можно двигать куда угодно, но место под него остаётся пустым и его не займут другие части.

Если элемент выходит за пределы окна браузера, то появится горизонтальная или вертикальная полосы прокрутки.

Помните, что смещение происходит не от краёв окна браузера, а от того места, где изначально стоял блок.

Допустим мы хотим сместить первый дочерний элемент влево и вниз.

 .child-one

Первый блок сдвинется вправо на 20 пикселей. При этом его правая часть выходит за пределы родительского контейнера, а нижняя часть налезает на второй блок, частично перекрывая его. Кстати, можно задавать и отрицательные значения.

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

При задании подобного позиционирования элемент перестаёт существовать в потоке документа и его положение задаётся относительно краёв браузера или родительского окна.

Ширина элемента, если она не задана явно, определяется шириной содержимого с учётом padding, border и margin. Элемент не меняет своё исходное положение, если у него нет свойств right, left, top и bottom. Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Если добавить свойство width, то значение right будет проигнорировано. Аналогично с высотой элемента при использовании свойств top, bottom и height.

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

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

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

Элемент перемещается вместе с документом при его прокрутке. Свойство z-index работает, при этом абсолютно позиционированные элементы перекрывают статичные элементы, даже если они в коде ниже.

Абсолютное позиционирование позволяет скрывать элементы. Для этой цели часто добавляется стиль left: -9999px, который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда скрывают настоящий флажок, а вместо него стилизуют элемент label, связанный с input и выполняющим его функции.

Применим абсолютное позиционирование к первом блоку.

 .child-one

Блок теряет свои привычные свойства и полностью выпадает из потока. Другие блоки перестают замечать его, но при этом элемент остаётся на странице, занимая левую верхнюю позицию в родительском контейнере и сжимаясь.

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

 .child-one

Сюрприз! Блок разместился в указанной позиции относительно окна браузера, а не своего родительского контейнера, так как на самом деле блок выпал из него. Это справедливо, если родительский блок имеет статичное позиционирование (static), которое в нашем случае опущено, так как используется по умолчанию.

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

 .parent

Запоминаем связку: родитель (относительное) — дочерний (абсолютное). По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative, то произойдёт смена системы координат и смещение происходит относительно родительского блока. Значения padding не учитываются.

На самом деле, родительский блок мог иметь любые другие значения, кроме static. Если попробовать связку absolute-absolute, то ничего не изменится.

Абсолютное позиционирование часто применяется для точной расстановки отдельных элементов. Разместим первый блок в нижнем правом углу родителя.

 .child-one

Фиксированное позиционирование: fixed

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

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

 .child-one

По поведению фиксированное смещение схоже с абсолютным – элемент выпадает из нормального потока, его место освобождается и другие элементы вообще его не замечают. С помощью такого приёма можно очень легко сделать верхние, нижние, боковые панели на странице, которые не будут исчезать при прокрутке и всегда будут находиться на виду.

Также может использоваться для вывода диалоговых окон — при этом фиксированное сообщение невозможно прокрутить вверх или вниз, оно всегда остаётся на своём месте.

Липкое позиционирование — sticky

Липкое позиционирование обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице. Если родительский блок уходит вверх, то фиксированный блок также уходит с ним. Это лучше смотреть самостоятельно.

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

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

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

Первый блок
Второй блок

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

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

Первый блок
Второй блок

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

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

1. Роман 26.03.2016 at 23:47

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

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

• Sergey 18.10.2017 at 21:35

Пользуйтесь на здоровье! Рад помочь ��
Балин,спасибо чувак,очень помог,добра тебе

• Sergey 20.04.2018 at 16:26

Без проблем!)

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

• Sergey 23.02.2019 at 11:28

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

Добрый день!
помогите, пожалуйста, решить такую же задачу в родительском диве
находится два дочерних Компания «УкрМашСервис» © 2019 все права защищены Тут иконки соц сети в красном квадрате на скрине должны отображаться соцсети
http://prntscr.com/mxcw04 но они не отображаются((( файл стилей: @media all and (max-width: 400px) < #footerBottomoverflow: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;
> >

• Sergey 17.03.2019 at 13:09

Елена, дайте пжлс ссылку на сайт, я посмотрю.

• Sergey 02.06.2020 at 08:41