Позиционирование в css примеры. Специфика построения потока документа

Позиционирование задаётся с помощью свойства position . Свойство может иметь четыре значения, которые мы и рассмотрим.

Абсолютное позиционирование

Абсолютное позиционирование задается так:

Position: absolute

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

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

Block{ position: absolute; bottom: 0; right: 0; background: gray; }

Элемент с классом block будет сдвинут в нижний правый угол браузера.

Рассмотрим пример, когда блок находится внутри родительского элемента.

Блок внутри родительского элемента

Мы сначала родительскому контейнеру записали относительное позиционирование (relative ), а для элемента block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper .

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

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

Работу этого значения можно сравнить с visibility: hidden , когда элемент скрывается со страницы, но место под него остается нетронутым. Блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части. Сдвинуть блок можно с помощью свойств top , left и так далее.

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

Стандартный блок

Стандартный блок

Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.

Стандартный блок

Как видите, можно задавать и отрицательные значения.

Фиксированное позиционирование

Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:

Block{ position: fixed; }

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

Статическое позиционирование

Последний вид – статическое позиционирование, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице в сценариях JavaScript.

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left , top , right и bottom , также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed , relative или absolute , то отсчет координат ведется от края родительского элемента. fixed По своему действию это значение близко к absolute , но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. static Элементы отображаются как обычно. Использование свойств left , top , right и bottom не приводит к каким-либо результатам. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Рис. 1. Применение свойства position

Объектная модель

document.getElementById("elementID ").style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit .

Свойство position распространяется на все элементы и может иметь одно из пяти возможных значений:

• static
• relative
• absolute
• fixed
• inherit

position:static

Из раздела 9 :

Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства "top ", "right ", "bottom " и "left " не применяются.

этом примере :

• Второй блок отображается там же, где бы он отображался без определения position
• Значения задаваемые для top не используются, поскольку для блоков с "static" значение всех смещений всегда "auto"

Что следует помнить:

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

position:relative

Из раздела 9 Модель визуального форматирования :

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

На что следует обратить внимание в этом примере :

• Блок "два" смещён ниже на 300 пикселей, но блок "три" и его содержимое остались на месте. Выглядит как будто содержимое блок "два" съехало со страницы, оставив свой след. Это выглядит так, потому что "relative" (относительное) позиционирование не нарушает нормальный поток .
• Блок с относительным позиционированием накладывается на следующие элементы и отображается перед другими блоками.

Что следует помнить:

• Вычисленные значения всегда left = -right и top = -bottom. Если контейнер блока имеет значение direction равное ltr , то используется значение "left", а "right" = -left. Если direction контейнера блока имеет значение равное rtl , то используется значение "right", а "left" игнорируется.
• В отличии от "absolute" (абсолютной) модели, свойства top , right , bottom и left ни могут растянуть или сжать блок, они не могут влиять на его размер.

position:absolute

Из раздела 9 Модель визуального форматирования :

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

На что следует обратить внимание в этом примере :

• В связи с тем, что смещение не указано, блок "два" не перемещён относительно своей нормальной позиции, но если бы мы использовали, например: top:0;left:0; блок находился бы в левом верхнем углу окна просмотра .
• Макет отображается так, как если бы блоку "два" присвоили стиль: display:none . Блок был удалён из потока .
• С блоком "два" удалённым из поток, блок "три" переместился вслед за блоком "один" (параграфы последовали за ним).
• Как и все элементы удалённые из потока, блок "два" был сжат по горизонтали.

Что следует помнить:

• Для любого элемента с позиционированием "absolute" или "fixed" вычисляемое значение display:block .
• "Содержащий блок" это блок который определяет позиционирование контекста. Оно устанавливается ближайшим предком с "position" установленной в "absolute" , "relative" или "fixed" . Это означает, что родительский блок может и не быть содержащим блоком .
• Положение по умолчанию, абсолютно позиционируемого блока, не всегда бывает в стиле top:0;left:0; (в LTR контексте), на это есть две причины:

1. В содержащем блоке позиционирование блока определяется позиционированием ближайшего предка , если такового нет, то указанный контейнер является корневым элементом. Содержащий блок в котором расположен корневой элемент это прямоугольная область называемая начальным содержащим блоком. Для устройств без разбивки страниц он имеет размер области просмотра(окна или другой области просмотра на экране) и он прикреплён к странице. В этом примере показан блок позиционируемый относительно видимой области (по умолчанию, содержащий блок).
2. Элемент позиционируемый относительно отступов блока, а не содержимого блока и не бордюра содержащего блока . Этот новый пример демонстрирует где находился бы блок "два" если бы границы отступа блока не касались границы содержимого блока (содержащий блок - элемент body ).

Размер окна может быть определён значениями свойств: top , right , bottom и left . Например обнуление этих свойств сделает блок растянутым по размеру видимой области. Обнуление всех смещений блока (Примечание: в IE6 блок не растянется)

Для создания маски наложения, которая не прокручивается вместе с документом (как в предыдущем примере) можно использовать либо fixed фиксированное позиционирование вместо absolute абсолютного, либо установить стиль body в position:relative как начального блока позиционирования области просмотра (стиль элемента html не работает в IE). Пример наложения .

position:absolute запускает haslayout .

Самое главное, что следует помнить:

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

position:fixed

Из раздела 9 Модель визуального форматирования" :
Фиксированное позиционирование является под категорией абсолютного позиционирования. Разница в том, что при фиксированном положении блока, содержащий блок определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это удобно для размещения подписей внизу каждой страницы. Блоки, которые больше чем область страницы обрезаются. Части блока с фиксированным позиционированием, которые не видны в начальном содержащем блоке, не будут напечатаны.
На что следует обратить внимание в примере :

• В связи с тем, что фиксированное позиционирование является под категорией абсолютного позиционирования, то всё, что было верно для "absolute" , так же верно и для "fixed" (элемент сжимается по горизонтали, удаляется из потока и т.д.)
• Блок позиционируется относительно видимой области и не прокручивается вместе со страницей.
• В IE6, блок отображается как "static" блок , но есть "забавный" обходной путь для этого.
• При печати документа, блок "два" отобразится на каждой странице.

Что следует помнить:

• Положение блока рассчитывается в соответствии с "absolute" моделью, но кроме этого блок фиксируется относительно некоторой ссылки. В случае использования следующих медиа типов: handled , projection , screen , tty и tv блок фиксируется относительно видимой области и не перемещается при прокрутке.
• Содержание блока может быть не доступным для просмотра пользователями, если оно находится за пределами видимой области.
• В случае использования медиа типа "print" , авторы могут не хотеть что бы элемент отображался на каждой странице. Тогда лучше использовать следующие правили для @media :

@media print { #logo {position: static;} }

Как и position:absolute , position:fixed запускает haslayout в EI.

position:inherit

Если для блока указан position:inherit , то он будет принимать такие же вычисленные значения свойств как и его родительский блок.
Обратите внимание, что IE6 и IE7 не поддерживают это значение, кроме тех случаев когда используется direction и visibility (см )

Что следует помнить:

Смещение блока
Помните, что при абсолютном и фиксированном позиционировании блоков, значения установленные в процентах для top , right , bottom и left вычисляются в соответствии с размерами содержащего блока (который может быть не родительским блоком)
"position" и "overflow"
Блок со стилем overflow:hidden будет обрезать элементы с относительным позиционированием (вложенные блоки), но никогда не будет скрывать блоки с абсолютным позиционированием. Это связано с тем, что родительский блок не всегда является содержащим блоком (ближайшего предка с "position" установленной в "absolute" , "relative" и "fixed" ).
Это означает, что элементы с абсолютным позиционирование отобразятся вне блока со стилем overflow:hidden если этот блок не является содержащим блоком или внутренним элементом указанного блока. Данный пример показывает как это работает.
Поля
Авторы могут использовать поля элементов вне зависимости от схемы их позиционирования.
В случае с IE
В IE позиционирование блока может быть благословением или проклятием:

• В IE6, position:relative (с haslayout ) могут быть использованы отрицательные поля для предотвращения обрезания блока родительским контейнером (пример демонстрирующий решение этой проблемы).
• Позиционированный элемент может "мешать" расположению блоков в IE6 и 7 и может создавать наложение содержимого (пример)

Порядок наложения и уровень наложения

• В соответствии с последовательностью исходного кода, позиционированные блоки могут выплывать перед блоками расположенными в нормальном потоке.
• Авторы могут указывать уровень наложения через свойство "z-index" , только на позиционированные блоки.
• В IE6 и 7, просто факт позиционирования может вызывать наложение контента (пример см. выше).

Аналогия с призраками DrLangbhani:

Элемент с относительной позицией всегда смещён относительно своего нормального положения в потоке. Другими словами, он смещён относительно того места где был бы при нормальных обстоятельствах и его смещение не влияет на положение элементов расположенных вокруг него. Это как призрак, который покинул своё тело. Тело, которое имеет ширину, высоту и оказывает влияние на окружение, но невидимо. Призрачные блоки в могут перемещаться, но всё ещё связаны со своим телом и его позиция по прежнему измеряется от него. Теперь элемент с абсолютным позиционированием, с ним ещё проще. Он больше не влияет на своё окружение (он вырван из потока). Он как настоящий призрак без тела. Что касается, родственных элементов, то он их больше не беспокоит, как если бы его не существовало. Что бы узнать свое положение он просматривает каждого предка пока не найдёт элемент с position:relative или position:absoluter. Этот элемент будет служить точкой отсчёта. Если он не найдёт элемент с позиционированием, то будет ориентироваться относительно документа.

И left , они позволяют произвести смещение позиционированного элемента относительно определенного края. Ниже в примере рассмотрены возможные типы позиционирования элемента:

1. position : relative (элемент с относительным позиционированием). При использовании свойства left позиционированный элемент смещается относительно его текущей позиции (отрицательное значение смещает элемент влево, положительное значение вправо). На примере left: 200px;
2. position : absolute (элемент с абсолютным позиционированием). При использовании свойства left позиционированный элемент смещается относительно левого края его предка (отрицательное значение смещает элемент влево, положительное значение вправо), при этом предок должен иметь значение position отличное от установленного по умолчанию - static , иначе отсчёт будет вестись относительно левого края окна браузера (как при значении position fixed ). На примере left : 40px .
3. position : fixed (элемент с фиксированным позиционированием). При использовании свойства left позиционированный элемент смещается относительно левого края окна браузера (отрицательное значение смещает элемент влево, положительное значение вправо). На примере left : 40px .
4. position : static (элемент со статическим позиционированием - является значением по умолчанию). Значение свойства left не повлияет на позиционирование элемента.

Более подробную информацию о позиционировании элементов вы можете получить в учебнике CSS в статье .

Поддержка браузерами

Свойство			Opera		IExplorer	Edge
position	1.0	1.0	4.0	1.0	7.0	12.0

CSS синтаксис:

position: "static | absolute | fixed | relative | initial | inherit" ;

JavaScript синтаксис:

Object.style.position = "absolute"

Значения свойства

Значение	Описание
absolute	Абсолютное позиционирование. При смещении элемент сдвигается относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static , иначе отсчёт будет вестись относительно, указанного края окна браузера (как при position : fixed ).
fixed	Фиксированное позиционирование. При смещении элемент сдвигается относительно заданного края окна браузера.
static	Статическое позиционирование. Элементы отображаются в том порядке, как они указаны в потоке HTML документа. Это значение по умолчанию.
relative	Относительное позиционирование. При смещении элемент сдвигается относительно его текущей позиции.
	Устанавливает свойство в значение по умолчанию.
	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Нет.

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

h1{position:static;}

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

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

Если элемент указан как позиционируемый, то его положение было изменено со статического на одно из четырех возможных значений свойства background position CSS : relative , absolute , fixed , sticky .

В дополнение к пяти упомянутым значениям, в CSS3 были добавлены еще два новых значения свойства: page и center .

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

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

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

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

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

Когда элемент позиционируется абсолютно (position: absolute ), он может быть размещен относительно другого элемента на странице. Элемент, относительно которого он размещается, должен иметь уже заданную позицию.

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

Например, следующее изображение демонстрирует элемент, который размещен статически. Розовый квадрат при этом смещен влево при помощи свойства float так, чтобы текст обтекал его:

Статически позиционируемый элемент

Серый контур показывает границу контейнера розового квадрата. Для контейнера было установлено position: relative , поэтому он задает контекст позиционирования для розового квадрата. После того как розовый квадрат позиционирован абсолютно, он удаляется из потока страницы и текст распределяется так, как будто квадрата никогда и не было в потоке:

Розовый квадрат позиционируется абсолютно относительно своего родителя (серые границы ). Он располагается: top: 30px , right: 40px .

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

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

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

Значение свойства sticky , center и page на данный момент все еще являются экспериментальными со слабой поддержкой.

Элемент с «прилипающим » позиционированием (position: sticky ) рассматривается как гибрид относительного и фиксированного элементов. Например:

Element { position: sticky; top: 70px; }

Заданный элемент будет вести себя так, как если бы он имел position: relative , пока область просмотра не достигнет во время прокрутки точки в 10 пикселей от верхней границы области просмотра. Если элемент находится выше, то он зафиксируется в 70 пикселях от верхней части, пока прокрутка браузера не достигнет порогового значения.

«Прилипающий » эффект обычно создается с помощью JavaScript , и как только значение sticky станет поддерживаться всеми браузерами, то его можно будет воспроизвести, используя CSS .

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

Значение center используется для центрирования элемента внутри другого элемента. Центрированный элемент будет размещен в центре контейнера и удален из «стека » элементов страницы. Можно воспользоваться свойствами смещения, чтобы сдвинуть элемент с его центрированной позиции.

Поведение значения page свойства position до сих пор неясно. Оно связано с постраничным выводом и контейнерами, созданными с помощью CSS Regions .

Любопытные факты и примечания

Элементы с CSS position absolute , использующие свойства смещения, могут иметь отступы (margins ),которые размещаются внутри контекста позиционирования.

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

position: absolute; left: 0; right: 0;

Аналогично абсолютно позиционируемый элемент может быть растянут вертикально с помощью свойств top и bottom :

position: relative; top: 0; bottom: 0;

В случае, когда высота и ширина элемента при CSS абсолютном позиционировании определены, то:

• если оба свойства top и bottom определены, то top имеет большую силу;
• если right и left определены, left выигрывает;
• если свойство direction имеет значение rtl (например, арабский ), то «побеждает » right.

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

Официальный синтаксис

Синтаксис:

position: static | relative | absolute | sticky | center | page | fixed

Начальное значение: static .

Применимо: все элементы.

Использование в анимациях: нет.

Значения

static

Алгоритм CSS позиционирования по умолчанию. Блок располагается в соответствии с нормальным потоком. Свойства top, right, bottom и left не применяются.

relative

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

Эффект применения свойства position: relative к табличным элементам:

• table-row-group , table-header-group , table-footer-group и table-row смещаются относительно своей нормальной позиции в пределах таблицы. Если ячейки таблицы объединяют несколько строк, то смещаются только ячейки относительно позиционированной строки;
• table-column-group , table-column не смещают соответствующий столбец, когда применено свойство position: relative ;
• table-caption и table-cell смещаются относительно нормальной позиции внутри таблицы. Если ячейка таблицы занимает несколько столбцов или строк, то смещается вся составная ячейка.

absolute

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

sticky

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

center

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

page

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

Как и в абсолютной модели, отступы блока не перекликаются с какими-либо другими отступами.

Примеры

Parent { position: relative; } .child { position: absolute; top: 10px; left: 30px; } /* Заголовок остается на виду при прокручивании области просмотра */ header { position: fixed; top: 0; left: 0; right: 0; } /* Этот элемент становится зафиксированным, как только его положение относительно вершины области просмотра станет меньше или равно 100 пикселям */ .sticky { position: sticky; top: 100px; }

Демо

Следующее демо содержит демонстрацию работы четырех основных значений позиционирования: relative , absolute , fixed и даже sticky :

Посмотреть демо

Поддержка браузерами

Свойство position работает во всех основных браузерах: Chrome , Firefox , Safari , Opera , Internet Explorer , а также на Android и iOS .

Но поддержка значений fixed и sticky различается среди браузеров. Вот таблицы совместимости для этих двух значений:

В Internet Explorer фиксированное позиционирование в CSS не работает, если документ находится в режиме совместимости.