Свойство 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 не работает, если документ находится в режиме совместимости.

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

Специфика построения потока документа

работает с потоком веб-страницы. Как это понять? По умолчанию все элементы страницы располагаются в том порядке, в котором вы создали их в html- разметке. Если тег header расположен над тегом footer, то и на странице он будет отображаться выше. И наоборот, если вы почему-то решите разместить footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». При этом блочные элементы занимают всю доступную для них ширину. Строчные, в свою очередь, располагаются в одну строку, пока не займут ее всю, а потом начнут переноситься на новую. Этот порядок именуется «потоком документа».

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

CSS Position: static

Position: static, или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. В обычных условиях вам не придется иметь с ним дело. Если для какого-нибудь блока или строки не задано вообще никакого позиционирования, значит, оно имеет значение static. На странице такой компонент отображается в соответствии с потоком. Если указать ему свойства right/left или top/bottom, никакого эффекта не будет.

CSS Position: fixed

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

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

CSS Position: relative

Использование этого свойства называется относительным позиционированием . Если задать элементу свойство Position : relative, тот останется на своем месте. На первый взгляд, ничего особенного не произойдет, но все измениться, если дополнительно использовать свойства right/left и top/bottom. С их помощью можно управлять перемещением компонента относительно его местоположения. На том месте, где блок или строка были раньше, окажется пустое пространство - другие элементы останутся на своих положениях, не обращая внимания на освободившееся место .

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

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

Один из самых интересных и наиболее часто используемых вариантов. При использовании свойства Position со значением absolute положение компонента страницы будет высчитываться относительно окна браузера. Прочие элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. Казалось бы, все точно так же, как в случае с Position : fixed, но есть и серьезные различия.

Во-первых, положением элемента можно свободно управлять - для этого используются свойства top/right/bottom/left. Например, если вы зададите значение bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. Во-вторых, при скроллинге «абсолютный» компонент останется на своем месте, вместо того, чтобы перемещаться со страницей.

Взаимодействие абсолютных блоков с родительскими элементами

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

Рассмотрим пример. У вас есть div с классом relative-div, внутри которого размещается div с классом absolute-div. Задаем внутреннему блоку свойство Position : absolute. Тот сразу же «вылетает» из потока и оказывается где-то вверху, ведь теперь его расположение просчитывается относительно окна браузера. Теперь задаем блоку с классом relative-div свойство Position : relative и «блудный сын» возвращается на место. Почти. На самом деле, он оказывается в верхнем левом углу родительского элемента.

Почему так происходит? Дело в специфике свойства Position : absolute. По умолчанию его положение зависит от окна браузера, но если «родитель» тоже позиционирован как-то кроме static, позиция начинает зависеть от родительского элемента. Это очень удобно, потому что можно разместить компонент в любом месте, не просчитывая огромные цифры относительно окна браузера. Прием часто используется для размещения иконок, кнопок и других небольших элементов.

Одна из главных трудностей новичков состоит в том, чтобы центрировать элемент вертикально и горизонтально. Грамотно используя свойство Position , сделать это проще простого. CSS Position: absolute по центру устанавливается следующим образом. Допустим, у вас есть d iv с классом absolute-div, который находится в «диве» с классом relative-div. «Родитель» позиционирован относительно и его ширина равна ширине всей страницы. «Потомок» имеет ширину и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента.

Все, что нужно сделать - это задать абсолютному компоненту top: 50 % и left: 50 %. Почти готово! Absolute-div сдвинулся с места и оказался почти в центре, но не совсем. Середины «родителя» касаются его края, а нам нужно, чтобы в центре блока оказался центр «потомка». Для этого нужно задать ему margin-left и margin-right со значениями -200 px. Тем самым мы сместим абсолютно позиционированный блок на половину его высоты и ширины. Все, он в центре!

Перекрывание компонентов

Проблемой может стать непростое, на первый взгляд, «наложение» позиционированных элементов на их «соседей». Например, компонент с Position : fixed будет перекрывать все, что расположено на странице. Исправить ситуацию можно с помощью свойства z-index, однако помните, что оно работает только для позиционированных элементов. Соответственно, если вы хотите размещать блок поверх фиксировано позиционированного элемента, этому блоку придется также задать позиционирование. Например, относительное.

Л учший способ освоить позиционирование - рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. Постарайтесь научиться использовать его в сочетании с функцией calc() - это даст возможность более гибко настраивать расположение. Однако помните, что это свойство не предназначено для выстраивания всей «сетки» страницы. С его помощью нужно перемещать относительно небольшие элементы, иначе можно слишком легко запутаться.

С войство POSITION

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

Значения:

static — статическое позиционирование, как есть.
inherit — наследование свойств от родителя.

Остальные значения рассмотрим подробнее.

Значение relative: относительное позиционирование

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

Element { position: relative; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;}
— для блока с картинкой задано позиционирование relative и смещение сверху на 25px и слева на 50px. Элемент сместился относительно нормального потока, на практике удвоив эти значения:

Значение absolute: абсолютное позиционирование

Элемент с абсолютным позиционированием занимает положение, определённое значениями свойств Bottom, Left, Right, Top , которые задают его смещение относительно границ родителя.

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

Element { position: absolute; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;}

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

Значение fixed: фиксированное позиционирование

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

Используют значение fixed редко. Как правило, это горизонтальное меню вверху или внизу страницы, как в почте Яндекса.

С войство Z-INDEX

Свойство задаёт размещение позиционированного элемента относительно оси Z. Что означает: элементы накладываются друг на друга в порядке возрастания — чем больше значение свойства z-index, тем выше расположен элемент. Действует только для элементов, у которых задано значение свойства Position и отлично от static .

Значения:

auto — элементы размещаются в порядке их расположения в коде страницы.
inherit — наследование от родителя.

Element-1, .element-2, .element-3 { position:relative;}
.element-1 { z-index:3; left:40px; top:50px; font-size:46px;}
.element-2 { z-index:2; left:50px;}
.element-3 { z-index:1; top:-50px;font-size:76px; color:#999;}

— в качестве второго элемента у нас изображение. Поменялся порядок размещения у первого и третьего элементов. Нижний элемент-1 разместился сверху, а 3-ий оказался нижним «слоем»:

Свойство position имеет следующие значения
static relative absolute fixed
Только совместно с ним применяются свойства (искл. position: static;)
top bottom right left
Одновременно могут присутствовать
margin transform float (искл. position: absolute; и position: fixed;)

Добавить пустой тег перед div с class="primer" - .

Введение

Элементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре "Морской бой". Между кораблями должны быть пустые клеточки - margin.

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

В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.

Статического позиционирование - position: static;

position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.

Относительное позиционирование - position: relative;

Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.

Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.

Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.

Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте - он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div ().

Полная аналогия со свойством

Для встроенных элементов

Встроенные элементы margin не смещает вниз и вверх (). Только top, bottom

Б А Б

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

Казалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.

Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left.

Итоговая таблица

А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.

position

Свойство CSS position используется для указания способа позиционирования HTML-элемента на странице. Само изменение позиции элемента осуществляется с помощью свойств top , right , bottom и left .

Тип свойства

Назначение: позиционирование .

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства CSS position является одно из ключевых слов задающих способ позиционирования.

• static - обычное расположение элемента на странице, с учетом его типа (блочный, встроенный и т.д.) и элементов окружающих его.
• relative - относительное позиционирование. Сначала браузер устанавливает элемент, как при обычном расположении, а потом смещает его относительно данного места. При этом остальные HTML-элементы ведут себя так, будто элемент никуда не перемещался, то есть место, где он находился до смещения, остается незанятым, а на новом месте они его «не видят».
• absolute - абсолютное позиционирование. Позиционирование элемента происходит относительно его ближайшего предка, у которого значение свойства position не равно static (то есть position присутствует сразу у двух элементов). Если же такого предка нет, то элемент позиционируется относительно окна браузера. При этом окружающие HTML-элементы ведут себя так, будто абсолютно позиционируемого элемента вообще нет на странице, то есть форматирование происходит без его участия.
• fixed - тоже абсолютное позиционирование. Почти такое же, как и absolute , только здесь элемент вообще не может позиционироваться относительно какого-либо элемента‑предка, а только относительно окна браузера, поэтому свойство position используется только для самого элемента. Вдобавок при прокрутке (скроллинге) элемент не меняет своего местоположения в окне.
• inherit - наследует значение свойства CSS position от родительского элемента.

Как вы знаете, обычным втроенным (inline) элементам нельзя явно задать высоту (CSS ) или ширину (CSS ). Однако, если к встроенному элементу применяется позиционирование со значением absolute или fixed , то размеры у него становятся изменяемые. Помните об этой особенности, часто она очень помогает.

Процентная запись: не существует.

Значение по умолчанию: static.

HTML-элементы называются предками для тех тегов, которые находятся внутри них на любом уровне вложенности, а родительскими для тех, которые находятся внутри них на первом уровне. Естественно предки являются одновременно и родительскими элементами для своих потомков первого уровня вложенности (дочерних).

Естественно при позиционировании вовсе не обязательно использовать свойства CSS top , right , bottom или left , чтобы изменить положение элемента. Да, при относительном позиционировании это не даст особого эффекта - элемент будет вырван из прямого потока, но его место все-равно никто не сможет занять. А вот при абсолютном, элемент будет не только «вырван» из контекста HTML-страницы, но и нижестоящие элементы займут его место. Причем при position: fixed он еще и будет оставаться на одном месте при скроллинге.

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

Синтаксис

position: static | relative | absolute | fixed | inherit

Пример CSS: использование position

Версии CSS

Браузеры

Internet Explorer 6.0 и 7.0 не понимают значение inherit , IE 6.0 еще не понимает и fixed .