логотип PurpleSchool
логотип PurpleSchool

Свойство Position. Особенности его применения.

Автор

Алексей Овсянников

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

Cвойство position

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

Синтаксис

position: static;
position: initial;
position: relative;
position: inherit;
position: absolute;
position: fixed;
position: sticky;

Значения

  • static(значение по умолчанию): элементы будут спозиционированы согласно правилам нормального потока.
  • relative: положение элемента вычисляется в соответствии с нормальным потоком. Затем элемент смещается относительно своего нормального положения, при этом не влияя на положение последующих блоков. Это смещение может привести к перекрытию блоков и появлению боковой полосы прокрутки в случае переполнения. Элемент с position: relative всегда сохраняет свои размеры и размеры вложенных в него элементов.
  • absolute: позволяет позиционировать элемент относительно предка с position: relative. Если ни у одного родительского элемента не установлен position: relative, элемент будет с позиционирован относительно окна браузера. Положение элемента задается с помощью свойств right, left, top и bottom
  • sticky: элемент закрепляется в определенной позиции на экране при прокрутке пользователем вниз. Может использоваться для создания фиксированной шапке / боковой панели сайта, которая будет оставаться видимой при прокрутке страницы вниз, обеспечивая легкий доступ к навигации сайта.
  • fixed: позиционирует элемент относительно окна браузера и закрепляет его в области просмотра при прокрутке страницы. Элемент с фиксированным позиционирование не вернется к своему обычному положению в потоке документа, даже если пользователь прокрутит страницу до точки, где элемент был изначально расположен. Этим фиксированное положение отличается от липкого(sticky) позиционирования.
  • initial: Устанавливает значение свойства в значение по умолчанию.
  • inherit: Наследует значение свойства от родительского элемента.

Свойства top, right, bottom, left

Свойства top, right, bottom и left используются для указания расстояния элемента от краев содержащего его блока. Эти свойства используются в сочетании со свойством position. По умолчанию значение каждого свойства установлено в значение auto.

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

Синтаксис

left: 50px;
bottom: -3ch;
right: 0.75rem;
top: 40%;
bottom: initial;
right: inherit;

Значения

  • фиксированное значение длины: Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются
  • %: положительное значение в процентах от высоты содержащего блока. Для элементов с position: sticky вычисление рассчитываются относительно высоты корневого элемента.
  • initial: Устанавливает значение свойства в значение по умолчанию
  • inherit: Наследует значение свойства от родительского элемента
Стрелочка влевоПорядок наложения элементов. Свойство z-index.Структура блочной модели. Свойства Padding и Margin.Стрелочка вправо

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний