Position relative css что это: Свойство position

УСБ

 # родитель {
  положение: родственник;
  
  ширина: 500 пикселей;
  высота: 400 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px #9e70ba;
  размер шрифта: 24px;
  выравнивание текста: по центру;
}
#ребенок {
  положение: абсолютное;
  справа: 40 пикселей;
  верх: 100 пикселей;
  ширина: 200 пикселей;
  высота: 200 пикселей;
  цвет фона: #fafafa;
  граница: сплошная 3px #78e382;
  размер шрифта: 24px;
  выравнивание текста: по центру;
}
 

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

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

Ознакомьтесь с другими подробными статьями о свойствах CSS, такими как эта: CSS Positions, SASS и LESS Nesting.

Если вам понравилось, обязательно подпишитесь на нашу рассылку — впереди еще много статей!

Относительная позиция CSS | Как выполняется относительная позиция в CSS?

При разработке страниц в HTML может потребоваться изменить положение всех элементов страницы в соответствии со страницей или макетом. Например, при загрузке страницы один элемент будет располагаться в одном месте, другой — в другом, или оба элемента должны располагаться относительно друг друга. Чтобы реализовать это, свойства позиции позволяют указать, какой тип позиции должен иметь элемент в соответствии с требуемыми сценариями, такими как «фиксированная», «относительная», «липкая», «абсолютная» и т. д. в вашем HTML-коде. В CSS Position Relative мы увидим, как мы можем позиционировать различные элементы на HTML-странице, используя свойства позиции CSS на некоторых примерах.

Синтаксис:

позиция: значение;

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

Значение	Описание
статическая	Если элемент определен как статический, то он всегда будет иметь позицию в соответствии с обычным потоком страницы. Это условие, когда ничего не определено как элемент в дизайне HTML-страницы. Это также значение по умолчанию. Статический элемент не меняет своего положения.
фиксированный	Если элемент определен как статический, то элемент всегда будет иметь фиксированную позицию относительно точки обзора или страницы. Он всегда находится в одном и том же месте, даже если мы прокручиваем страницу.
абсолютный	Несмотря на то, что имя является абсолютным, если элемент определен как абсолютный, то элемент всегда будет иметь позицию, которая является относительной по отношению к его ближайшему соседнему элементу, а не к точке обзора или странице. Если соседа нет, то он будет позиционироваться относительно тела документа и его перемещение будет связано с прокруткой страницы
родственник	Если элемент определен как относительный, то элемент всегда будет иметь положение в соответствии с определенными значениями его положения, например: слева, справа, сверху, снизу относительно нормального положения, и его перемещение связано с прокруткой страница.
липкий	Если элемент определен как относительный, то элемент всегда будет следовать за прокруткой страницы и придерживаться прокрутки. Липкие элементы никогда не покидают пользователя, когда он прокручивает веб-страницу.

Как выполняется относительная позиция в CSS?

Вам просто нужно указать требуемое значение позиции в соответствии с синтаксисом в вашем HTML-коде, чтобы получить эту позицию в выводе.

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

Примеры реализации относительной позиции CSS

Ниже приведены примеры относительной позиции CSS:

Пример #1

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

Код:

Вывод:

Пример #2

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

Код:

Вывод:

Пример №3

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

Код:

Вывод:

3

3 Пример #4

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

Код:

Вывод:

Example #5

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

Код:

Вывод:

Заключение

На этом мы завершаем изучение темы «Относительное положение CSS».