В чем отличия между relative и absolute — примеры и объяснение

Когда речь заходит об использовании позиционирования элементов на веб-странице, два самых распространенных значения – relative и absolute. Но в чем заключаются их отличия и как правильно выбрать нужное значение для каждой ситуации?

Относительное (relative) позиционирование позволяет задать положение элемента относительно его нормального местоположения. Если элемент имеет относительное позиционирование, то при задании свойств top, right, bottom или left, элемент будет сдвигаться относительно своего естественного положения, но при этом не изменяется положение других элементов.

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

Абсолютное (absolute) позиционирование, в отличие от относительного, задает положение элемента ​​относительно ближайшего родительского элемента, который имеет позиционирование не равное static (то есть не равное значению по умолчанию). Если ни один из родительских элементов не имеет позиционирования с заданным значением, то элемент с абсолютным позиционированием будет отсчитывать свои координаты относительно окна браузера.

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

Отличия между relative и absolute позиционированием

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

Абсолютное позиционирование (absolute), в отличие от относительного позиционирования, позволяет элементам позиционироваться относительно ближайшего предка с заданным позиционированием (обычно это родительский элемент). Если родительскому элементу не задано никакое позиционирование, то элемент с абсолютным позиционированием будет позиционироваться относительно окна браузера. Для задания позиции элементу с абсолютным позиционированием используются свойства top, right, bottom и left, которые определяют отступы от границ родительского элемента.

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

Также стоит отметить, что элементы с абсолютным позиционированием могут перекрывать друг друга, если их позиции перекрываются. Для решения этой проблемы обычно используются свойства z-index (устанавливает «слои»), чтобы определить порядок отображения элементов на странице.

Отличие в связи с родительским элементом

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

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

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

Отличие в относительности координат

Относительные координаты (relative) в CSS определяют положение элемента относительно его исходного местоположения. То есть, если элемент имеет относительные координаты, его положение будет рассчитываться относительно его нормального положения на веб-странице.

Пример:

<style>
.relative-div {
position: relative;
left: 50px;
top: 50px;
background-color: lightblue;
width: 200px;
height: 200px;
}
</style>
<div class="relative-div">
<p>Это относительный блок</p>
</div>

В данном примере, относительный блок с классом «relative-div» будет смещен на 50 пикселей вправо и на 50 пикселей вниз относительно его исходного положения.

Абсолютные координаты (absolute) в CSS определяют положение элемента относительно ближайшего родительского элемента с позиционированием (который имеет значение отличное от static) или относительно самого окна браузера, если такого родительского элемента нет.

Пример:

<style>
.parent {
position: relative;
width: 300px;
height: 300px;
background-color: lightgray;
}
.absolute-div {
position: absolute;
left: 50px;
top: 50px;
background-color: lightblue;
width: 200px;
height: 200px;
}
</style>
<div class="parent">
<div class="absolute-div">
<p>Это абсолютный блок</p>
</div>
</div>

В данном примере, абсолютный блок с классом «absolute-div» будет смещен на 50 пикселей вправо и на 50 пикселей вниз относительно верхнего левого угла его родительского элемента с классом «parent».

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

Примеры использования relative позиционирования

1. Изменение позиции элемента относительно его исходного местоположения:

• HTML:

<div style="position: relative; left: 20px;">
Текст
</div>

• Результат:

Текст

2. Перекрытие элементов без изменения их расположения в документе:

• HTML:

<div style="position: relative; z-index: 1;">
Element 1
</div>
<div style="position: relative; z-index: 2;">
Element 2
</div>

• Результат:

Element 2
Element 1

3. Создание анимации элемента:

• HTML:

<div style="position: relative;">
<img src="image.jpg" alt="Изображение" style="position: relative; animation-name: move; animation-duration: 2s;">
</div>

• Результат:

Изображение с анимацией движения

Примеры использования absolute позиционирования

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

Ниже приведены несколько примеров использования absolute позиционирования:

• Создание навигационного меню: Когда вы хотите создать навигационное меню, которое остается в одном месте вне зависимости от прокрутки страницы или изменения размера браузера, вы можете использовать абсолютное позиционирование.
• Создание всплывающих окон: Если вы хотите создать всплывающее окно или всплывающую подсказку, которая должна появляться в определенном месте на странице, вы можете использовать абсолютное позиционирование.
• Создание слайдеров и слайд-шоу: Абсолютное позиционирование позволяет размещать слайды в определенном месте на странице и обеспечивает более гибкое управление их расположением и размером.

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

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

Отличие в изменении свойств при скроллинге

Одно из отличий между relative и absolute заключается в их поведении при скроллинге.

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

С другой стороны, при использовании значения свойства position: absolute, элемент будет «прикреплен» к ближайшему родительскому элементу, который имеет свойство position: relative или position: absolute. Если такого элемента не будет найдено, элемент будет «прикреплен» к окну браузера. Это означает, что при скроллинге страницы элемент сохраняет свое фиксированное положение на экране, что может быть полезно для создания заднего фона, фиксированного меню или других элементов, которые должны оставаться на месте, даже при прокрутке страницы.

Ниже приведена таблица, демонстрирующая разницу в поведении relative и absolute при скроллинге:

Отличие в работе при различных размерах экрана

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

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

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

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

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

Разница в влиянии на остальные элементы страницы

Оптимальный выбор позиционирования в зависимости от задач

В CSS есть два основных типа позиционирования элементов: relative (относительное) и absolute (абсолютное). Оба типа имеют свои преимущества и недостатки, и правильный выбор зависит от конкретной задачи.

Relative positioning (относительное позиционирование) позволяет элементам перемещаться относительно их нормального положения в документе. Относительное позиционирование не искажает поток документа, то есть соседние элементы не нарушаются. Это полезно, когда вы хотите изменить положение элемента относительно его обычного расположения, но не хотите влиять на положение других элементов.

Absolute positioning (абсолютное позиционирование) позволяет точно определить положение элемента на странице, относительно его ближайшего предка с позиционированием (обычно ближайшего родительского элемента с позиционированием). Это полезно, когда вы хотите точно указать местоположение элемента, независимо от расположения других элементов на странице. Однако абсолютно позиционированный элемент выходит из потока документа и может нарушить положение других элементов.

Примеры использования относительного позиционирования:

• Создание эффекта параллакса при прокрутке страницы
• Выравнивание элементов относительно друг друга
• Анимация перемещения элементов

Примеры использования абсолютного позиционирования:

• Размещение всплывающих окон (pop-up)
• Создание слайдеров и каруселей
• Создание меню или навигации с указанием точных координат

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