Относительные позиции что это

CSS position: относительное и абсолютное позиционирование

CSS- свойство position определяет положение элемента на веб-странице. Существует несколько типов позиционирования: static, relative, absolute, fixed, sticky, initial и inherit . Разберемся, что означают эти типы:

• Static — это значение свойства по умолчанию. Элементы располагаются в том порядке, в котором они отображаются на веб-странице.
• Relative — элемент позиционируется относительно своего стандартного положения.
• Absolute — элемент позиционируется абсолютно по отношению к первому позиционированному родителю.
• Fixed — элемент позиционируется относительно окна браузера.
• Sticky — элемент позиционируется на основе позиции прокрутки пользователя.

Теперь поговорим о двух наиболее часто используемых значениях свойства position — relative и absolute .

Что такое относительное позиционирование CSS?

Когда вы устанавливаете положение относительно элемента , без добавления других атрибутов позиционирования (top, bottom, right, left), ничего не произойдет . При добавлении дополнительной позиции, например left: 20px, элемент переместится на 20 пикселей вправо от своей обычной позиции. То есть, элемент смещается относительно себя самого . При этом другие элементы не будут затронуты.

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

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

HTML

First element
 
Second element

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

Если задать значение relative для свойства position , то положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 1), отрицательное — сдвиг вверх.

Рис. 1. Значения свойств left и top при относительном позиционировании

Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 2). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.

Рис. 2. Значения свойств right и bottom при относительном позиционировании

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

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

В примере 1 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.

Пример 1. Заголовок текста

Аз и буки шрифтовой науки

Шрифт это средство выражения дизайна, а не какого-то банального чтения.

Результат данного примера показан на рис. 3.

Рис. 3. Сдвиг текста относительно исходного положения

Относительное позиционирование часто применяется для создания анимации и эффектов, связанных со сдвигом элементов. В примере 2 с помощью элемента добавляется кнопка с тенью, при наведении курсора на кнопку она смещается вправо и вниз на величину тени, а сама тень при этом прячется. Всё это в комплексе придаёт кнопке трёхмерный эффект.

Пример 2. Сдвиг кнопки

Наведите курсор на кнопку, чтобы увидеть анимацию в действии. Время движения кнопки определяется свойством transition.

Для относительно позиционированных элементов работает свойство z-index , которое управляет положением элементов по оси Z. Если требуется задать наложение элементов относительно друг друга, то в стилях достаточно указать position со значением relative без смещения самого элемента. В примере 3 выводятся картинки, при наведении на них курсора они увеличиваются в размерах и отображаются поверх остальных изображений.

Пример 3. Использование z-index

Автор: Влад Мержевич
Последнее изменение: 05.08.2023

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

.block < background: #795548; padding: 20px; color: #fff; font-family: Arial, sans-serif; >.block h2 < color: #feea3b; overflow: hidden; font-weight: normal; margin-top: 0; text-align: center; >.block h2::before, .block h2::after < content: ''; background: #feea3b; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; >.block h2::before < right: 10px; margin-left: -50%; >.block h2::after

Апперцепция

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

Создайте веб-страницу, как показано на рис. 1.

body < background: #f7f6f2; margin: 0; >.bg < min-height: 200px; background: #a1bd57; >.content

См. также

• bottom
• left
• position
• position в CSS
• relative и absolute
• right
• top
• z-index
• Абсолютное позиционирование
• Добавление тени
• Использование в вёрстке
• Липкое позиционирование
• Нормальное позиционирование
• Переходы в CSS
• Подробнее о позиционировании
• Поток
• Свойства позиционирования
• Фиксированное позиционирование

Свойство position

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

position: static

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

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

position: static;

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

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

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

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

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

position: relative

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

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

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

position: relative; top: 10px;

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

Координаты

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

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

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

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

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

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

position: absolute

position: absolute;

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

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

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

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

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

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

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

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

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

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

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

 div 
10px от границ

Относительное позиционирование — CSS: Позиционирование элементов

Позиционирование является большим модулем в CSS и позволяет описать, как элемент внутри HTML-документа может быть размещен вне нормального потока документа. Как говорилось в прошлом уроке, нормальным потоком документа является поток, при котором все элементы выводятся в той последовательности, в которой они заданы внутри HTML-документа.

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

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

При наведении на элемент (для этого можно использовать селектор .animate-hover:hover ) мы использовали CSS-правило position: relative, что означает применение относительного позиционирования для элемента. Управлять расположением элемента со свойством position можно с помощью четырех CSS-свойств:

Каждое из этих свойств принимает значение, на которое будет «сдвинут» элемент. Эти значения не обязательно должны быть положительными, свойства также принимают и отрицательные значения. Попробуйте поизменять значения в примере выше и увидеть, как работают различные значения свойств top, right, bottom и left.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях: