Положение - CSS-хитрости | CSS Альманах 2024

positionСвойство может помочь вам управлять расположение элемента, например:

.element ( position: relative; top: 20px; )

Относительно своего исходного положения элемент выше теперь будет смещен вниз на 20 пикселей. Если бы мы анимировали эти свойства, мы могли бы увидеть, какой контроль это дает нам (хотя это не очень хорошая идея по соображениям производительности):

relativeэто только одно из шести значений positionсвойства. Вот другие:

Значения

static: каждый элемент имеет статическое положение по умолчанию, поэтому элемент будет придерживаться обычного потока страницы. Таким образом, если установлен левый / правый / верхний / нижний / z-индекс, это не повлияет на этот элемент.
relative: исходная позиция элемента остается в потоке документа, как и staticзначение. Но теперь left / right / top / bottom / z-index будут работать. Позиционные свойства «подталкивают» элемент из исходного положения в этом направлении.
absolute: элемент удаляется из потока документа, и другие элементы будут вести себя так, как если бы его даже нет, в то время как все остальные позиционные свойства будут работать с ним.
fixed: элемент удаляется из потока документа, как абсолютно позиционированные элементы. Фактически, они ведут себя почти одинаково, только элементы с фиксированным позиционированием всегда относятся к документу, а не к конкретному родительскому элементу, и на них не влияет прокрутка.
sticky(экспериментально): элемент обрабатывается как relativeзначение до тех пор, пока положение прокрутки области просмотра не достигнет заданного порогового значения, после чего элемент займет fixedпозицию, в которой ему приказано придерживаться.
inherit: positionзначение не каскадно, поэтому его можно использовать специально для принудительного inheritвключения и значения позиционирования от его родителя.

Абсолютное

Если дочерний элемент имеет absoluteзначение, то родительский элемент будет вести себя так, как будто дочернего элемента вообще нет:

.element ( position: absolute; )

И когда мы попытаемся установить другие значения, такие как left,, bottomи rightмы обнаружим, что дочерний элемент реагирует не на размеры своего родителя, а на документ:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

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

.parent ( position: relative; )

Теперь свойства , такие как left, right, bottomи topбудет относиться к родительскому элементу, так что , если мы делаем дочерний элемент прозрачен , мы можем видеть , что сидит на дне родителя:

Фиксированный

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

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

Рабочий стол

Хром	Fire Fox	IE	Край	Сафари
4	2	7	12	3.1

Мобильный / планшет

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Липкий

stickyЗначение , как компромисс между relativeи fixedценностями. На момент написания этой статьи это экспериментальное значение, то есть оно не является частью официальной спецификации и лишь частично принимается некоторыми браузерами. Другими словами, это, вероятно, не лучшая идея использовать это на веб-сайте живого производства.

Что оно делает? Что ж, он позволяет вам позиционировать элемент относительно чего-либо в документе, а затем, когда пользователь прокручивает определенную точку в области просмотра, фиксирует положение элемента в этом месте, чтобы он оставался постоянно отображаемым, как элемент с fixedценить.

Возьмем следующий пример:

.element ( position: sticky; top: 50px; )

Элемент будет располагаться относительно друг друга до тех пор, пока положение прокрутки области просмотра не достигнет точки, в которой элемент будет 50pxрасполагаться сверху области просмотра. В тот момент, элемент становится липким и остается в fixedположении 50pxверхней части экрана.

Следующая демонстрация иллюстрирует эту точку, где верхняя навигация relativeпозиционируется по умолчанию, а вторая навигация установлена stickyв самом верху области просмотра. Обратите внимание, что на момент написания демоверсия будет работать только в Chrome, Safari и Opera.