что означает значение relative у свойства position
position
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Типы позиционирования
За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):
Синтаксис
Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.
Значения
Формальный синтаксис
Примеры
Относительное позиционирование
Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.
Абсолютное позиционирование
Фиксированное позиционирование
Липкое позиционирование
Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например.
. позиционирует элемент с id «one» относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.
Методы позиционирования элементов в CSS
Базовый поток документа
Например, элементы, имеющее блочное отображение ( display: block ) отображаются в потоке как прямоугольные области, каждый из них на новой линии друг под другом сверху вниз.
Ширина элементов с блочным отображением по умолчанию равна доступной ширине родительского элемента, т.е. элемента, в который каждый из них непосредственно вложен. Высота их по умолчанию равна такой величине, которой будет достаточно, чтобы отобразить весь контент, который находится в каждом из них.
Элементы со строчным отображением ( display: inline ) выводятся иначе. Они в отличии от блочных элементов не размещаются каждый на новой строке, а следуют друг за другом слево направо. Если пространство справа закончилось, то они переносятся на следующую строку, а не на новую линию как элементы с блочным отображением.
В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.
CSS-свойство position
CSS свойство position — это одно из свойств с помощью которого можно изменить базовое поведение элементов в потоке. Другими словами, данное свойство позволяет «выдернуть» любой элемент из потока документа и разместить его в другом месте относительно окна браузера или других элементов на веб-странице.
Свойство position имеет 5 значений:
static — это значение по умолчанию. Оно означает что элемент находится в базовом потоке.
Каждый элемент в потоке занимает определённую область. Но область элемента не всегда сохраняется за ним при его позиционировании.
Статичное позиционирование (static)
Явная установка элементу CSS-свойства position: static может понадобиться только в том случае, когда нужно переопределить другое значение position установленное элементу.
Пример выстраивания статично позиционированных элементов:
Относительное позиционирование (relative)
Например, для того чтобы элемент сдвинуть вверх или вниз относительного его исходного положения к нему нужно применить CSS свойство top или bottom :
Для сдвига элемента вправо или влево используется CSS свойство left или right :
Пример, в котором 2 элементу установим относительное позиционирование и сместим его на 20px вверх и влево относительно его исходного положения:
Абсолютное позиционирование (absolute)
Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.
Позиционирование выполняется относительно ближайшего позиционированного предка.
Если данный элемент не был бы позиционированным, то позиционирование #id-3 выполнялось бы относительно #id-1 :
При этом другие элементы его видеть не будут, и, следовательно, они будут расположены на странице, не обращая никакого внимание на него.
Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат top и bottom ( left и right ).
Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.
Фиксированное позиционирование (fixed)
Фиксированное позиционирование похоже на абсолютное, но в отличии от него оно всегда привязывается к краям окна браузера (viewport), и остаётся в таком положении даже при скроллинге страницы.
Фиксированное позиционирование применяется для закрепления на странице навигационных меню, кнопки «вверх», панелей с социальными кнопками и многого другого.
Совместное использование относительного и абсолютного позиционирования
Относительное позиционирование очень часто используется вместе с абсолютным позиционированием.
Свойство position
Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
position: static
Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.
Его можно также явно указать через CSS-свойство:
Здесь и далее, для примеров мы будем использовать следующий документ:
В этом документе сейчас все элементы отпозиционированы статически, то есть никак.
Элемент с position: static ещё называют не позиционированным.
position: relative
Относительное позиционирование сдвигает элемент относительно его обычного положения.
Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:
Координаты
Для сдвига можно использовать координаты:
position: absolute
Абсолютное позиционирование делает две вещи:
Например, отпозиционируем заголовок в правом-верхнем углу документа:
Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.
Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.
В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.
Браузер растянет такой элемент до границ.
Как растянуть абсолютно позиционированный блок на всю ширину документа?
Первое, что может прийти в голову:
Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!
Прокрутите вниз ифрейм:
Вы увидите, что голубой фон оканчивается задолго до конца документа.
Дело в том, что в CSS 100% относится к ширине внешнего блока («containing block»). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?
В данном случае им является так называемый (««initial containing block»»), которым является окно, а не документ.
То есть, координаты и ширины вычисляются относительно окна, а не документа.
Может быть, получится так?
С виду логично, но нет, не получится!
Координаты top/right/left/bottom вычисляются относительно окна. Значение bottom: 0 – нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.
position: absolute в позиционированном родителе
Если у элемента есть позиционированный предок, то position: absolute работает относительно него, а не относительно документа.
Используем position для размещения элемента управления:
Часть текста перекрывается. Кнопка более не участвует в потоке.
Используем float для размещения элемента управления:
Браузер освобождает место справа, текст перенесён. Кнопка продолжает находиться в потоке, просто сдвинута.
position: fixed
Это подвид абсолютного позиционирования.
Разница в нескольких словах:
Когда страницу прокручивают, фиксированный элемент остаётся на своём месте и не прокручивается вместе со страницей.
В следующем примере, при прокрутке документа, ссылка #top всегда остаётся на своём месте.
Итого
Виды позиционирования и их особенности.
Визуально переносит элемент на новое место.
Новое место вычисляется по координатам left/top/right/bottom относительно ближайшего позиционированного родителя. Если такого родителя нет, то им считается окно.
Подвид абсолютного позиционирования, при котором элемент привязывается к координатам окна, а не документа.
При прокрутке он остаётся на том же месте.
Почитать
CSS-позиционирование по-настоящему глубоко в спецификации Visual Formatting Model, 9.3 и ниже.
Ещё есть хорошее руководство CSS Positioning in 10 steps, которое охватывает основные типы позиционирования.
Задачи
Модальное окно
В примере ниже DIV’у дополнительно поставлен цвет фона и прозрачность, чтобы было видно перекрытие:
Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).
Можно, конечно, узнать эту высоту при помощи JavaScript, но CSS даёт более удобный способ. Будем использовать position:fixed :
Свойство z-index должно превосходить все другие элементы управления, чтобы они перекрывались.
position в CSS
Свойство position — это универсальное и мощное свойство. Оно позволяет установить или изменить положение элемента и содержит четыре возможных значения:
Часто используется наряду с четырьмя свойствами координат:
static
relative
Когда position установлено относительно, элемент может перемещаться относительно его текущей позиции.
Давайте переместим второй абзац:
Красный абзац переместился на 20px слева направо и на 10px сверху вниз относительно его естественного положения, где он полагался быть.
Обратите внимание, что синие абзацы не сдвинулись вообще. При использовании относительного позиционирования, красный абзац может свободно перемещаться, не нарушая макет. Единственное, что сдвигается со своего места, так это сам элемент. Все остальные элементы не знают, что элемент переместился.
absolute
Когда position устанавливается абсолютно, элемент может перемещаться относительно первого позиционированного предка.
Позиционированного? Что такое позиционированный элемент?
Характеристикой позиционированного элемента является то, что он может выступать в качестве точки отсчёта для своих дочерних элементов.
Давайте представим простую иерархию:
Если ширина установлена, то значение right отбрасывается.
fixed
Единственное отличие состоит в том, что точкой отсчёта является окно просмотра. Это означает, что фиксированный элемент не перемещается со страницей, он фиксируется на экране.
Свойство position
Свойство position определяет тип метода позиционирования, используемого для элемента.
Есть пять разных значений position (позиции):
position: static;
HTML-элементы по умолчанию расположены статически.
На статические элементы не влияют свойства top, bottom, left и right.
Элемент с position: static; не позиционируется каким-либо особым образом; он всегда располагается в соответствии с обычным потоком страницы:
Вот CSS, который используется:
Пример
position: relative;
Элемент с position: relative; позиционируется относительно своего нормального положения.
Установка свойств top, right, bottom и left относительно позиционированного элемента приведет к его отклонению от его нормального положения. Другое содержимое не будет откорректировано, чтобы вписаться в любой пробел, оставленный элементом.
Вот CSS, который используется:
Пример
position: fixed;
Элемент с position: fixed; располагается относительно области просмотра, что означает, что он всегда остается на том же месте, даже если страница прокручивается. Свойства top, right, bottom и left используются для позиционирования элемента.
Фиксированный (fixed) элемент не оставляет пробела на странице, где он обычно находился бы.
Обратите внимание на фиксированный элемент в правом нижнем углу данной страницы. Вот CSS, который используется:
Пример
position: absolute;
Элемент с position: absolute; позиционируется относительно ближайшего позиционированного предка (вместо позиционирования относительно окна просмотра, как фиксированный).
Однако, если элемент с абсолютным позиционированием не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы.
Вот простой пример:
Вот CSS, который используется:
Пример
div.relative <
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
>
div.absolute <
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
>
position: sticky;
Элемент с position: sticky; (прикреплённый) позиционируется на основе позиции прокрутки пользователя.
В этом примере sticky элемент придерживается верхней части страницы ( top: 0 ), когда вы достигнете своей позиции прокрутки.
Пример
Перекрывающиеся элементы
Когда элементы располагаются на странице, они могут перекрывать другие элементы.
Свойство z-index определяет порядок стека элемента (какой элемент должен быть расположен перед или позади других, т.е. какой элемент перекрывает другой).
Элемент может иметь положительный или отрицательный порядок в стеке:
Это заголовок
Пример
Элемент с более высоким порядком стека всегда находится перед элементом с более низким порядком стека.