Относительные позиции что это
Перейти к содержимому

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

  • автор:

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

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

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

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

Обновлено: 2023-06-02 20:18:32 Вадим Дворников автор материала

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

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

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

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

HTML

First element
Second element

CSS

#first_element < position: relative; left: 30px; top: 70px; width: 500px; background-color: #fafafa; border: solid 3px #ff7347; font-size: 24px; text-align: center; >#second_element

CSS

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

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

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

HTML

#child

CSS

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

Вадим Дворников автор-переводчик статьи « CSS Position Relative vs Position Absolute »

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

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

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

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

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

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

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

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

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

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

relative и absolute

Обычно относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform . Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative , а для дочернего absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 1).

Значения свойств left, right, top и bottom для вложенного элемента

Рис. 1. Значения свойств left, right, top и bottom для вложенного элемента

Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются. В примере 1 прямоугольник располагается в правом нижнем углу блока возле границы.

Пример 1. Использование position

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

Положение вложенного элемента относительно родителя

Рис. 2. Положение вложенного элемента относительно родителя

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

Пример 2. Использование absolute

Голубика

Вывод даты

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

Вывод даты в левом верхнем углу

Рис. 3. Вывод даты в левом верхнем углу

Сочетание относительного и абсолютного позиционирования можно применять и к псевдоэлементам ::before и ::after. Это сокращает размер кода HTML, поскольку нам уже не нужны лишние элементы, и позволяет делать всякие интересные декоративные эффекты. В примере 3 показано создание всплывающей подсказки.

Пример 3. Создание всплывающей подсказки

Текст самой подсказки мы пишем в пользовательском атрибуте data-tooltip и выводим его с помощью свойства content со значением attr(data-tooltip) . Остальной код CSS используется для оформления этого текста (рис. 4).

Вид всплывающей подсказки

Рис. 4. Вид всплывающей подсказки

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

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

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

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

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

Значения свойств right и 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

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
  • Подробнее о позиционировании
  • Поток
  • Свойства позиционирования
  • Фиксированное позиционирование

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *