Css fixed: position | htmlbook.ru

position | htmlbook.ru

CSS позиционирование, обтекание элементов и контекст наложения

Свойство position | CSS справочник

Свойство position | CSS

position | CSS | WebReference

position в CSS | Учебные курсы

Позиционирование элементов в HTML и CSS

CSS — Свойство позиции

Схемы позиционирования

Определение и применение

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

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

Версия CSS

Наследуется

Анимируемое

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

Краткая информация

Синтаксис

Обозначения

Значения

Пример

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

Примечание

Спецификация

Браузеры

Браузеры

Автор и редакторы

static

relative

absolute

fixed

Позиционирование HTML/CSS — виды?

Относительное позиционирование. Свойство position: relative

Абсолютное позиционирование. Значение <absolute>

Стандартное статическое позиционирование. Значение static

Фиксация элемента. Position: fixed

Position: inherit и position: initial.

Свойства перемещения

Заключение

Позиция Свойство

позиция: статическая;

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

1. Содержащий блок

2. Выбор схемы позиционирования: свойство position

3. Смещение блока: свойства top, right, bottom, left

4. Обтекание: свойство float

5. Управление потоком рядом с плавающими элементами: свойство clear

6. Определение контекста наложения: свойство z-index

Нормальный поток

Обтекание

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

6.1. Контекст наложения

Содержание

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

CSS 1	CSS 2	CSS 2.1	CSS 3

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

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: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
     <img src="images/girl.jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

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

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

[window.]document.getElementById(«elementID»).style.position

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

CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:

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

В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

Нормальный поток включает блочный контекст форматирования (элементы с display block, list-item или table), строчный (встроенный) контекст форматирования (элементы с display inline, inline-block или inline-table), и относительное и «липкое» позиционирование элементов уровня блока и строки.

В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right.

В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed;.

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент html является содержащим блоком для элемента body, который, в свою очередь, является содержащим блоком для всех его дочерних элементов и так далее. В случае позиционирования содержащий блок полностью зависит от типа позиционирования. Содержащий блок элемента определяется следующим образом:

Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
Содержащим блоком элемента с position: fixed; является окно просмотра.
Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
— если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding;
— если предок — элемент уровня строки, содержащим блоком будет область содержимого;
— если предков нет, то содержащий блок элемента определяется как начальный содержащий блок.
Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.

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

Свойство не наследуется.

position
Значение:
`static`	Блок располагается в соответствии с нормальным потоком. Свойства `top`, `right`, `bottom` и `left` не применяются. Значение по умолчанию.
`relative`	Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно его нормального положения и во всех случаях, включая элементы таблицы, не влияет на положение любых следующих блоков. Тем не менее, такое смещение может привести к перекрытию блоков, а также к появлению полосы прокрутки в случае переполнения. Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него. Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков. Влияние `position: relative;` на элементы таблицы определяется следующим образом: Элементы с `table-row-group`, `table-header-group`, `table-footer-group` иd `table-row` смещаются относительно их обычной позиции в таблице. Если ячейки таблицы занимают несколько строк, смещаются только ячейки начальной строки. `table-column-group`, `table-column` не смещает соответствующий столбец и не оказывает визуального влияния. table-caption and table-cell смещаются относительно своего нормального положения в таблице. Если ячейка таблицы охватывает несколько столбцов или строк, то она смещается целиком.
`absolute`	Положение блока (и, возможно, размер) задается с помощью свойств `top`, `right`, `bottom` и `left`. Эти свойства определяют явное смещение относительно его содержащего блока. Абсолютно позиционированные блоки полностью удаляется из нормального потока, не влияя на расположение сестринских элементов. Отступы `margin` абсолютно позиционированных блоков не схлопываются. Абсолютно позиционированный блок создает новый содержащий блок для дочерних элементов нормального потока и потомков с `position: absolute;`. Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения `z-index` перекрывающихся блоков.
`sticky`	Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно своего ближайшего предка с прокруткой или окна просмотра, если ни у одного из предков нет прокрутки. «Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения. «Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него. «Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.
`fixed`	Фиксированное позиционирование аналогично абсолютному позиционированию, с отличием в том, что для содержащим блоком устанавливается окно просмотра. Такой блок полностью удаляется из потока документа и не имеет позиции относительно какой-либо части документа. Фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. При печати фиксированные блоки повторяются на каждой странице, содержащим блоком для них устанавливается область страницы. Блоки с фиксированным положением, которые больше области страницы, обрезаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

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

Рис. 1. Разница между статичным, относительным и абсолютным позиционированием

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

top
Значение:
`auto`	Влияние значения зависит типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

top: 10px;
top: 2em;
top: 50%;
top: auto;
top: inherit;
top: initial;

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

right
Значение:
`auto`	Влияние значения зависит типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

right: -10px;
right: .5em;
right: -10%;
right: auto;
right: inherit;
right: initial;

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

bottom
Значение:
`auto`	Влияние значения зависит типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

bottom: 50px;
bottom: -3em;
bottom: -50%;
bottom: auto;
bottom: inherit;
bottom: initial;

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

left
Значение:
`auto`	Влияние значения зависит типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

left: 50px;
left: 10em;
left: 20%;
left: auto;
left: inherit;
left: initial;

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

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

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

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

Правила, регулирующие поведение плавающих боков, описываются свойством float.

Свойство не наследуется.

float
Значение:
`none`	Отсутствие обтекания. Значение по умолчанию.
`left`	Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю.
`right`	Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

float: left;
float: right;
float: none;
float: inherit;

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

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

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline, inline-block, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group. Значение inline-table меняет на table.

Свойство не оказывает влияние на элементы с display: flex и display: inline-flex. Не применяется к абсолютно позиционированным элементам.

Рис. 2. Обтекание элементов

Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

Свойство не наследуется.

clear
Значение:
`none`	Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию.
`left`	Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе.
`right`	Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе.
`both`	Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

clear: none;
clear: left;
clear: right;
clear: both;
clear: inherit;

Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;}.

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

Рис. 3. Положение элементов вдоль оси Z

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

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

Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.

Свойство не наследуется.

z-index
Значение:
`auto`	Вычисляется в `0`. Если для блока задано `position: fixed;` или это корневой элемент, значение `auto` также устанавливает новый контекст наложения. Значение по умолчанию.
целое число	Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана.
`inherit`	Наследует значение свойства от родительского элемента.
`initial`	Устанавливает значение свойства в значение по умолчанию.

Синтаксис

z-index: auto;
z-index: 0;
z-index: 5;
z-index: 999;
z-index: -1;
z-index: inherit;
z-index: initial;

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:

Корневой элемент <html>, который содержит все элементы веб-странице.
Блочные элементы, неплавающие и непозиционированные.
Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
Строковые непозиционированные элементы (текст, изображения).
Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity, filter, transform):

Корневой элемент <html>, который содержит все элементы веб-странице.
Позиционированные элементы с отрицательным значением z-index.
Блочные элементы, неплавающие и непозиционированные.
Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
Строковые непозиционированные элементы (текст, изображения).
Позиционированные элементы со значениями z-index: 0; и z-index: auto;.

CSS свойства

CSS свойство position указывает какой тип позиционирования используется для элемента (статический, относительный, абсолютный или фиксированный).

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

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

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

CSS синтаксис:

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

JavaScript синтаксис:

object.style.position = "absolute"

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

CSS2

Нет.

Нет.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства position</title>
<style> 
body {
    background-color:khaki; /* задаём задний фон цвета хаки */
    height:2000px; /* устанавливаем высоту элемента */
}
h2 {
    position:static; /* элемент со статическим позиционированием */
}
.relative { 
    position:relative; /* элемент с относительным позиционированием */
    left : 200px; * задаём смещение элемента влево относительно его текущей позиции */
    width 200px; /* задаём ширину блока */
    height: 250px; /* задаём высоту блока */
    border 5px solid; /* задаём стиль для границ сплошной и ширину 5px */
    background-color:orange; /* задаём задний фон оранжевого цвета */
}
.absolute {
    position:absolute; /* элемент с абсолютным позиционированием */
    left : 40px; * задаём смещение элемента влево относительно левого края его предка */
    width 150px; /* задаём ширину блока */
    height:

Свойство 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.

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

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

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

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

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

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

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

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

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

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

Иначе содержащий блок определяется согласно абсолютной модели.

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

.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 различается среди браузеров. Вот таблицы совместимости для этих двух значений:

<iframe src="http://caniuse.com/css-fixed/embed/" align="left" scrolling="no"> </iframe>

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

<iframe src="http://caniuse.com/css-sticky/embed/" align="left" scrolling="no"> </iframe>

«Прилипающее» позиционирование будет работать в Firefox 26 (Gecko 26) только если для параметра layout.css.sticky.enabled в about:config задано значение true.

Значения center и page в настоящее время не поддерживаются ни одним браузером.

В Gecko, если есть элемент <table> внутри позиционированного контейнера, такого как <div>, элемент со свойством position: absolute, находящийся внутри таблицы, будет позиционирован относительно внешнего <div>, а не таблицы, которая является ближайшим позиционированным родителем. Это ошибка, и она не была исправлена.

Элемент со свойством position: absolute внутри позиционированного элемента <div> с display: table-cell будет позиционирован относительного внешнего блокового элемента вместо содержащего <div>, что аналогично поведению, описанному выше.

Данная публикация представляет собой перевод статьи «Position» , подготовленной дружной командой проекта Интернет-технологии.ру

телеграм канал. Подпишись, будет полезно!

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

Значение по умолчанию	static
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

position: absolute | fixed | relative | static | sticky

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

absolute: Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.
fixed: Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
relative: Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static: Статичное позиционирование. Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
sticky: Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>position</title>
<style>
.layer1 {
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src=»image/girl.jpg» alt=»Девочка»>
</div>
</div>
</body>
</html>

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

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

Объект.style.position

Браузер Safari поддерживает значение -webkit-sticky.

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.


static, relative, absolute	1	1	6	1
fixed	1	1	6	1
sticky		32		6.1

В таблице браузеров применяются следующие обозначения.

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

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

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

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

static (значение по умолчанию)
relative
absolute
fixed

Часто используется наряду с четырьмя свойствами координат:

Это значение position по умолчанию: статичные элементы просто следуют естественному потоку. Любые значения left, right, top или bottom не оказывают влияния.

Когда position установлено относительно, элемент может перемещаться относительно его текущей позиции.

HTML

<p>Едва мы спрятали лодку, Джа увлёк меня в джунгли, и вскоре мы 
   вышли на узкую, хорошо утоптанную тропу.</p>
<p>Я ринулся вверх, пытаясь в последнем усилии 
   дотянуться до руки Джа, но ситик с такой силой рванул копьё на себя, 
   что оно вырвалось из рук мезопа, едва не сорвавшегося со скалы, 
   а я, всё ещё цепляясь за древко, полетел вниз, прямо в 
   раскрытую пасть зверюги.</p>
<p>Он уже перешёл на бег, замахиваясь на ходу тяжёлым копьём.</p>

CSS

p { border: 1px solid blue; }

Давайте переместим второй абзац:

.second { position: relative; border-color: red; left: 20px; top: 10px; }

Красный абзац переместился на 20px слева направо и на 10px сверху вниз относительно его естественного положения, где он полагался быть.

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

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

Позиционированного? Что такое позиционированный элемент?

Позиционированный элемент — это тот, у которого значение position установлено как relative, absolute или fixed. Таким образом, если положение не задано статичным, то элемент позиционированный.

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

Давайте представим простую иерархию:

HTML

<section>
  Я позиционирован относительно.
  <p>
    Я позиционирован абсолютно!
  </p>
</section>

CSS

section {
  background: gold;
  height: 200px;
  padding: 10px;
  position: relative; /* Превращает <section> в точку отсчёта для <p> */
}

p {
  background: limegreen;
  color: white;
  padding: 10px;
  position: absolute; /* Делает <p> свободно перемещаемым */
  bottom: 10px; /* 10px снизу */
  left: 20px; /* 20px слева */
}

Жёлтый раздел имеет высоту 200px, а позиционирование задано как relative, что превращает его в точку отсчёта для всех дочерних элементов.

Зелёный абзац позиционирован как absolute и может свободно перемещаться относительно жёлтого раздела. Установив оба значения left и bottom, мы переместим его в левый нижний угол.

Что произойдёт, если мы одновременно установим left и right?

Если ширина не задана, применение left: 0 и right: 0 растягивает элемент на всю ширину. Это эквивалент установки left: 0 и width: 100%.

Если ширина установлена, то значение right отбрасывается.

Когда position задано как fixed, оно действует как абсолютное: вы можете установить координаты слева/справа и сверху/снизу.

Единственное отличие состоит в том, что точкой отсчёта является окно просмотра. Это означает, что фиксированный элемент не перемещается со страницей, он фиксируется на экране.

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

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

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

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

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

Существует 4 основных типа позиционирования элементов в CSS:

position: absolute;

position: relative;

position: fixed;

position: static.

Все они могут использоваться для горизонтального и вертикального позиционирования.

Одно из самых часто используемых значений позиционирования в CSS. Использование данного значения задает не полное, а именно относительное позиционирование относительно внешнего блока. Это означает что его границы могут изменяться с помощью свойства <padding>.

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

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

Работают не все свойства перемещения по координатам. Всего их 4:

<Top> — указывает расположение элемента относительно верхней части блока.

<Bottom> — располагает блок относительно нижнего края.

<Right> — задает расположение относительно правой границы внешнего блока.

<Left> — перемещает элемент относительно левой части внешнего контейнера.

Если вы сделаете запись из 4 свойств: <top>, <bottom>, <left>, <right>, то будут работать только первые заданные свойства. То есть, <top> сработает раньше, чем <bottom>, а <left>, раньше чем <right>.

Ещё одним плюсом использования такого типа позиционирования является возможность использования свойства z-index. За счет этого относительное позиционирование в css лучше всего подходит для слоевой верстки.

Данное свойство прекрасно подойдет для позиционирования картинок, кнопок, таблиц и других блоков.

<!doctype>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <div>
            
            </div>
        </div>
    </body>
</html>

body{
    color: darkgreen;
    background: red;
    margin: 0 auto;
    height: 250vh;
}
#content{
    position: fixed;
    height: 100px;
    width: 100%;
    background: black;
}
.block{
    position: absolute;
    background: green;
    height: 50px;
    width: 50px;
    top: 40%;
    left: 10%;
}

Такой тип позиционирования блоков в css используется нередко. Он имеет несколько отличий от первого.

Он имеет не относительное а абсолютное позиционирование относительно родительского блока. Но по умолчанию он позиционируется относительно всей страницы. Это связано с тем, что все элементы по умолчанию имеют свойство {position: static}.

Название значение absolute говорит за себя, оно располагает задает элементу абсолютное позиционирование, что отличается от значения relative по целому ряду признаков.

Если не задать для его родителя свойство {position: relative или fixed}, то элемент будет расположен относительно всей страницы.

Чтобы элемент имел абсолютное позиционирование относительно какого-либо конкретного блока, то для его родителя нужно задать свойство {position: relative}.

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

Браузер воспринимает границы элемента так, как будто его не существовало вовсе. Из-за этого он не может быть перекрыт свойством z-index.

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

С его помощью намного проще задать позиционирование элементов по центру в css.

Пример использования абсолютного позиционирования:

Это стандартное позиционирование html элементов. Оно стоит по умолчанию для всех элементов, которые расположены на странице.

Его также можно использовать для удаления позиционирования. По сути, {position: static} является отменой позиционирования.

Такой тип позиционирования не позволяет использовать свойство z-index. Он располагает элементы в таком порядке, в каком они описаны в HTML документе.

{Position: fixed} или зафиксированное позиционирование. Который чаще всего используется при создании шапки и футера страницы. Может использоваться для создания блоков с рекламой.

body{

color: darkgreen;

background: red;

margin: 0 auto;

height: 250vh;

}

#content{

position: fixed;

height: 100px;

width: 100%;

background: black;

}

.block{

position: absolute;

background: green;

height: 50px;

width: 50px;

top: 40%;

left: 10%;

}

body{
    color: darkgreen;
    background: red;
    margin: 0 auto;
    height: 250vh;
}
#content{
    position: fixed;
    height: 100px;
    width: 100%;
    background: black;
}
.block{
    position: absolute;
    background: green;
    height: 50px;
    width: 50px;
    top: 40%;
    left: 10%;
}

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

Для таких элементов создается отдельный поток элементов. В первом потоке содержатся элементы, которые не зафиксированы на странице. Во втором — контент имеющий свойство {position: fixed}.

Первое значение задает наследственное свойство. Элемент будет иметь такое же позиционирование, как и его блок-родитель.

Второе значение задает стандартное позиционирование. По сути, то же самое что и {position: static}.

Давайте подробно рассмотрим свойства отвечающие за передвижение элементов. Они распространяются на все элементы не имеющие свойство {position: static}.

Как мы уже говорили: существует всего 4 свойства — <top>, <right>, <bottom>, <left>. Все они могут принимать разные значения.

Первое значение — <auto>, которое по умолчанию равно 0. Второе — точное значение, может измеряться в процентах, rem, em, vh и других величинах.

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

Для практики:

Создайте шапку, которая будет закреплена и не будет теряться при перемещении скролла.

Создайте футер, который не будет исчезать при прокрутке страницы.

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

Теги:
Макет

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

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

Существует пять различных значений позиции:

статический
родственник
фиксированная
абсолютное
липкий

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

static, relative, absolute

HTML-элементов по умолчанию позиционируются статично.

На статически позиционированные элементы не влияют свойства top, bottom, left и right.

Элемент с положением : статический; никак не позиционируется; это
всегда размещается в соответствии с обычным потоком страницы:

Этот элемент

имеет position: static;
Вот используемый CSS:
Пример
div.статическое {
положение: статическое;
граница: сплошная 3 пикселя # 73AD21;
}
Попробуй сам »
позиция: относительная;
Элемент с позицией: относительная; расположен относительно своего нормального положения.
Установка верхних, правых, нижних и левых свойств относительно позиционированного элемента вызовет
его необходимо отрегулировать от его нормального положения. Другой контент не будет изменен таким образом, чтобы он соответствовал разрывам, оставленным
элемент.
Этот элемент
имеет position: relative;
Вот используемый CSS:
Пример
div.относительная {
позиция: относительная;
слева: 30 пикселей;
граница: сплошная 3 пикселя # 73AD21;
}
Попробуй сам »
позиция: фиксированная;
Элемент с позицией : фиксированный; позиционируется относительно области просмотра, что означает, что он всегда
остается на том же месте, даже если страница прокручивается. Вершина,
Свойства right, bottom и left используются для позиционирования элемента.
Фиксированный элемент не оставляет зазора на странице, где он обычно располагался бы.
Обратите внимание на фиксированный элемент в правом нижнем углу страницы. Вот используемый CSS:
Пример
div.fixed {
позиция: фиксированная;
внизу: 0;
справа: 0;
ширина:
300 пикселей;
граница: сплошная 3 пикселя # 73AD21;
}
Попробуй сам »
Этот элемент
имеет position: fixed;
позиция: абсолютная;
Элемент с положением : абсолютный; позиционируется относительно ближайшего предка
(вместо позиционирования относительно области просмотра, как фиксированный).
Однако; если элемент с абсолютным позиционированием не имеет позиционированных предков,
он использует тело документа и перемещается вместе с прокруткой страницы.
Примечание. «Позиционируемый» элемент — это элемент, положение которого может быть любым, кроме
статический .
Вот простой пример:
Этот элемент имеет position: relative;
Этот элемент
имеет position: absolute;
Вот используемый CSS:
Пример
div.относительная {
позиция: относительная;
ширина: 400 пикселей;
высота: 200 пикселей;
граница: сплошная 3 пикселя # 73AD21;
}
дел. Абсолютное {положение
: абсолютное;
верх: 80 пикселей;
справа: 0;
ширина: 200 пикселей;
высота: 100 пикселей;
граница: сплошная 3 пикселя # 73AD21;
}
Попробуй сам »
позиция: липкая;
Элемент с позицией : липкий; позиционируется в зависимости от положения прокрутки пользователя.
Прикрепленный элемент переключается между относительно и фиксированным , в зависимости от положения прокрутки.Он позиционируется относительно, пока не будет достигнута заданная позиция смещения во вьюпорте — затем он «закрепится» на месте (например, position: fixed).
Примечание. Internet Explorer, Edge 15 и более ранние версии не поддерживают закрепленное позиционирование. Safari требует -webkit-
префикс (см. пример ниже). Вы также должны указать по крайней мере один из верхний , правый , нижний или левый для
липкое позиционирование для работы.
В этом примере липкий элемент прикрепляется к верхней части страницы ( вверху: 0 ), когда вы достигаете его положения прокрутки.
Пример
div.sticky {
позиция: -webkit-sticky; / * Safari * / Позиция
:
липкий;
верх: 0;
цвет фона: зеленый;
граница: 2px solid # 4CAF50;
}
Попробуй сам »
Перекрывающиеся элементы
Когда элементы расположены, они могут перекрывать другие элементы.
Свойство z-index определяет порядок стека элемента (какой элемент должен быть помещен перед или позади других).
Элемент может иметь положительный или отрицательный порядок стека:
Поскольку изображение имеет z-index, равное -1, оно будет помещено за текстом.
Пример
img
{
позиция: абсолютная;
слева: 0px;
верх: 0px;
z-индекс: -1;
}
Попробуй сам »
Элемент с более высоким порядком стека всегда находится перед элементом с более низким порядком стека.
Примечание: Если два позиционированных элемента перекрываются без z-index
указано, элемент, расположенный последним в HTML-коде, будет показан сверху.
Размещение текста на изображении
Как разместить текст поверх изображения:
Другие примеры
Задайте форму элемента
В этом примере показано, как задать форму элемента. Элемент обрезается по этой форме и отображается.
Проверьте себя упражнениями!
Все свойства позиционирования CSS
Имущество Описание
низ Устанавливает край нижнего поля для позиционированного блока
зажим Зажимает абсолютно позиционированный элемент
слева Устанавливает край левого поля для позиционированного блока
позиция Задает тип позиционирования элемента
правый Устанавливает правый край поля для позиционированного блока
верх Устанавливает край верхнего поля для позиционированного блока
z-индекс Устанавливает порядок стека элемента
.
CSS свойство позиции
Пример
Позиционируйте элемент
:
h3
{
позиция: абсолютная;
слева: 100 пикселей;
верх: 150 пикселей;
}
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Позиция Свойство определяет тип метода позиционирования, используемый для
элемент (статический, относительный, абсолютный, фиксированный или липкий).
Значение по умолчанию: статический
Унаследовано: №
Анимируемое: нет. Прочитать о animatable
Версия: CSS2
Синтаксис JavaScript: объект .style.position = «absolute»
Попробуй это
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Объект
позиция 1,0 7,0 1,0 1,0 4,0
Примечание. Прикрепленное значение не поддерживается в Internet Explorer, Edge 15 и более ранних версиях.
Синтаксис CSS
позиция: статическая | абсолютная | фиксированная | относительная | липкая | начальная | наследование;
Значения собственности
Значение Описание Играй
статический Значение по умолчанию.Элементы отображаются в том порядке, в котором они отображаются в потоке документов Играй »
абсолютное Элемент позиционируется относительно своего первого позиционированного (не статического) элемента-предка Играй »
фиксированная Элемент расположен относительно окна браузера Играй »
родственник Элемент позиционируется относительно своего нормального положения, поэтому "left: 20px"
добавляет 20 пикселей к ЛЕВОЙ позиции элемента Играй »
липкий Элемент располагается в зависимости от положения прокрутки пользователя.
Липкий элемент переключается между относительно и фиксированным , в зависимости от положения прокрутки.Он позиционируется относительно, пока не будет достигнута заданная позиция смещения во вьюпорте - затем он «закрепится» на месте (например, position: fixed).
Примечание. Не поддерживается в IE / Edge 15 или более ранних версиях. Поддерживается в Safari с версии 6.1 с префиксом -webkit-.
Попробуй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные Играй »
унаследовать Наследует это свойство от своего родительского элемента.Читать про наследство
Другие примеры
Пример
Как расположить элемент относительно его нормального положения:
h3.pos_left { позиция: относительная; слева: -20 пикселей; }
h3.pos_right { позиция: относительная; слева: 20 пикселей; }
Попробуй сам "
Пример
Больше позиционирования:
# parent1 { позиция: статическая; граница: сплошной синий 1px; ширина: 300 пикселей;
высота: 100 пикселей; }
# child1 { позиция: абсолютный; граница: сплошной красный 1px; верх: 70 пикселей; справа: 15 пикселей; }
# parent2 { положение: относительное; граница: сплошной синий 1px; ширина: 300 пикселей; высота: 100 пикселей; }
# child2 { позиция: абсолютная; граница: сплошной красный 1px; верх: 70 пикселей; справа: 15 пикселей; }
Попробуй сам "
связанные страницы
Учебник
CSS: позиционирование CSS
Ссылка
HTML DOM: позиция собственности
.
html - позиция CSS: фиксируется внутри позиционированного элемента
Переполнение стека
Около
Продукты
Для команд
Переполнение стека Общественные вопросы и ответы
Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии Программирование и связанные с ним технические возможности карьерного роста
Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама Обратитесь к разработчикам и технологам со всего мира
О компании
.
No related posts.
Share :

Имущество	Описание
низ	Устанавливает край нижнего поля для позиционированного блока
зажим	Зажимает абсолютно позиционированный элемент
слева	Устанавливает край левого поля для позиционированного блока
позиция	Задает тип позиционирования элемента
правый	Устанавливает правый край поля для позиционированного блока
верх	Устанавливает край верхнего поля для позиционированного блока
z-индекс	Устанавливает порядок стека элемента

Значение по умолчанию:	статический
Унаследовано:	№
Анимируемое:	нет. Прочитать о animatable
Версия:	CSS2
Синтаксис JavaScript:	объект .style.position = «absolute» Попробуй это

Значение	Описание	Играй
статический	Значение по умолчанию.Элементы отображаются в том порядке, в котором они отображаются в потоке документов	Играй »
абсолютное	Элемент позиционируется относительно своего первого позиционированного (не статического) элемента-предка	Играй »
фиксированная	Элемент расположен относительно окна браузера	Играй »
родственник	Элемент позиционируется относительно своего нормального положения, поэтому "left: 20px" добавляет 20 пикселей к ЛЕВОЙ позиции элемента	Играй »
липкий	Элемент располагается в зависимости от положения прокрутки пользователя. Липкий элемент переключается между `относительно` и `фиксированным` , в зависимости от положения прокрутки.Он позиционируется относительно, пока не будет достигнута заданная позиция смещения во вьюпорте - затем он «закрепится» на месте (например, position: fixed). Примечание. Не поддерживается в IE / Edge 15 или более ранних версиях. Поддерживается в Safari с версии 6.1 с префиксом -webkit-.	Попробуй »
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальные	Играй »
унаследовать	Наследует это свойство от своего родительского элемента.Читать про наследство