Содержание

position | htmlbook.ru

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

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 позиционирование, обтекание элементов и контекст наложения

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;.

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

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

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

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

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

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

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

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

Элемент считается позиционированным, если свойство 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 указывает расстояние, на которое левый край смещен вправо от левого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно левого края самого блока.

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

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

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

При использовании свойства 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. Не применяется к абсолютно позиционированным элементам.

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

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

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

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

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

Синтаксис

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

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

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

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

x-y-z-axisРис. 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;
6.1. Контекст наложения

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

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

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

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

position — Веб-технологии для разработчиков

Свойство css position указывает, как элемент позиционируется в документе. top, right, bottom и left определяют конечное местоположение позиционированных элементов.

Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Типы позиционирования

  • Позиционируемый элемент — это элемент, у которого вычисленное значение position является relative, absolute, fixed либо sticky. (Другими словами, это вce, кроме static.)
  • Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative. Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left и right задают горизонтальное смещение.
  • Абсолютно позиционируемый элемент — это элемент, чьё вычисленное значение position является absolute или fixed. top, right, bottom и left задают смещения от краёв содержащего блок элемента. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
  • Элемент с липкой позицией — это элемент, у которого значение вычисленного position является sticky. Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока.

В большинстве случаев абсолютно cпозиционированные элементы, которые имеют height и width установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно cпозиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как top, так и bottom, и оставляя height неопределенным (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как left, так и right, и оставляя width как auto.

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

  • Если указаны top и bottom (технически, не auto) — приоритет будет у top.
  • Если указаны left и right: приоритет будет у left, когда direction ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right, когда direction является rtl (персидский , Арабский, иврит и т. д.).

Синтаксис

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

Значения

static
Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.
relative
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static.
Это значение создает новый контекст наложения, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.
absolute
Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного содержащего блока. Его конечная позиция определяется значениями top, right, bottom, и left.
Это значение создаёт новый контекст наложения, когда значение z-index не auto. Поля абсолютно позиционированных коробок не сворачиваются с другими полями.
fixed
Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного содержащего блока, установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.
Это значение всегда создает новый контекст наложения. В печатных документах элемент помещается в одно и то же положение на каждой странице.
sticky
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.
Это значение всегда создает новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

Формальный синтаксис

static | relative | absolute | sticky | fixed

Примеры

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

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

HTML
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
CSS
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

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

Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является static). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок — см. также определение W3C), который содержит блок корневого элемента документа.

Простой пример:

<h2>Абсолютное позиционирование</h2>
<p>Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.</p>
<p>По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы.</p>
<p>Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.</p>
<p>встроенные элементы <span>как этот</span> и <span>вот этот</span> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов <span>перейдёт на новую строку, если это возможно, - как содержимое этого текста</span>, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:<img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

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

Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

HTML
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. 
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. 
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. 
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. 
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. 
    Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. 
    Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. 
    Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p>
  <div>One</div>
</div>
CSS
.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 500px;
  overflow: scroll;
  padding-left: 150px;
}

Липкое позиционирование

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

#one { position: sticky; top: 10px; }

… позиционирует элемент с id «one» относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

Общее использование для липкого позиционирования — для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

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

HTML
<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>
CSS
* {
  box-sizing: border-box;
}

dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

Доступность

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

Производительность и доступность

Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать sticky или fixed контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление will-change: transform к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.

Характеристики

Совместимость с браузером

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check outand send us a pull request.
Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам запрос на перенос.

Update compatibility data on GitHub

Компьютеры Мобильные
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
position Chrome
Полная поддержка

1
Edge
Полная поддержка

12
Firefox
Полная поддержка

1


Полная поддержка

1
Замечания Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).
Замечания Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).
IE
Полная поддержка

4
Opera
Полная поддержка

4
Safari
Полная поддержка

1
WebView Android
Полная поддержка

≤37
Chrome Android
Полная поддержка

18
Firefox Android
Полная поддержка

4


Полная поддержка

4
Замечания Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).
Замечания Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).
Opera Android
Полная поддержка

14
Safari iOS
Полная поддержка

1
Samsung Internet Android
Полная поддержка

1.0
Absolutely-positioned flex children Chrome
Полная поддержка

52
Edge
Полная поддержка

12
Firefox
Полная поддержка

52
IE
Полная поддержка

10
Opera
Полная поддержка

39
Safari
Полная поддержка

11
WebView Android
Полная поддержка

52
Chrome Android
Полная поддержка

52
Firefox Android
Полная поддержка

52
Opera Android
Полная поддержка

41
Safari iOS
Полная поддержка

11
Samsung Internet Android
Полная поддержка

6.0
fixed Chrome
Полная поддержка

1
Edge
Полная поддержка

12
Firefox
Полная поддержка

1


Полная поддержка

1
Замечания Before Firefox 44, position: fixed didn’t create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari’s long-time behavior.
IE
Полная поддержка

7


Полная поддержка

7
Замечания In Internet Explorer, fixed positioning doesn’t work if the document is in quirks mode.
Opera
Полная поддержка

4
Safari
Полная поддержка

1
WebView Android
Полная поддержка

≤37
Chrome Android
Полная поддержка

18
Firefox Android
Полная поддержка

4


Полная поддержка

4
Замечания Before Firefox 44, position: fixed didn’t create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari’s long-time behavior.
Opera Android
Полная поддержка

14
Safari iOS
Полная поддержка

1
Samsung Internet Android
Полная поддержка

1.0
Table elements as sticky positioning containers Chrome
Полная поддержка

56
Edge
Полная поддержка

16
Firefox
Полная поддержка

59
IE
Нет поддержки

Нет
Opera
Полная поддержка

43
Safari
Полная поддержка

8
WebView Android
Полная поддержка

56
Chrome Android
Полная поддержка

56
Firefox Android
Полная поддержка

59
Opera Android
Полная поддержка

43
Safari iOS
Полная поддержка

8
Samsung Internet Android
Полная поддержка

6.0
sticky Chrome
Полная поддержка

56
Edge
Полная поддержка

16
Firefox
Полная поддержка

32


Полная поддержка

32

Нет поддержки
26 — 48
Отключено From version 26 until version 48 (exclusive): this feature is behind the layout.css.sticky.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE
Нет поддержки

Нет
Opera
Полная поддержка

43
Safari
Полная поддержка

6.1


Полная поддержка

6.1
С префиксом Требует вендорный префикс: -webkit-
WebView Android
Полная поддержка

56
Chrome Android
Полная поддержка

56
Firefox Android
Полная поддержка

32


Полная поддержка

32

Нет поддержки
26 — 48
Отключено From version 26 until version 48 (exclusive): this feature is behind the layout.css.sticky.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android
Полная поддержка

43
Safari iOS
Полная поддержка

6.1


Полная поддержка

6.1
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android
Полная поддержка

6.0

Легенда


Полная поддержка
 
Полная поддержка

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

Выравнивание блока div со свойством position:absolute или fixed по центру.

Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.

Здесь есть несколько моментов, которые не совсем просто воспринимаются. На одном из них мне бы хотелось сегодня остановиться.

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

Для этого используется стандартная CSS конструкция margin:auto.

Но, что делать, если блок, который нужно выровнять по центру имеет абсолютное (absolute) или фиксированное положение (fixed). Такая ситуация иногда бывает.

Т.е. в данном случае наш пример принимает следующий вид.

Есть еще более современное решение этой проблемы — использование flexbox.

Подробнее здесь.

<div>
<div></div>
</div>

position:relative; — у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга <body>

position:absolute; — собственно говоря, само абсолютное позиционирование.

После произведенной манипуляции margin:auto работать уже перестает.

Как быть? Как можно снова выровнять блок по центру?

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

<div>
<div></div></div>

left:50%;  — смещаем блок относительно родительского на 50% влево.

margin-left:-150px; — т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.

Если ширина блока задается в процентах, то решение может быть следующим:

<div>
<div></div>
</div>

Если по центру нужно выровнять строку с текстом:

<p>Строка текста</p>

Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.

Все, что было сказано выше про position:absolute аналогично можно применить и к блокам, которые имеют position: fixed.

Есть еще более современное решение этой проблемы — использование flexbox.

Подробнее здесь.

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

basicweb.ru

  • HTML
    • Учебник HTML
    • Справочник тегов
    • Атрибуты событий
    • Глобальные атрибуты
    • Коды языков
    • Мнемоники
    • Цвета
    • Тесты знаний
  • CSS
    • Учебник CSS
    • Справочник свойств
    • Селекторы
    • Функции
    • Правила
    • Flexbox генератор
    • Grid генератор
    • Учебник LESS
  • JavaScript
    • Интерфейсы веб API
    • Объект Array
    • Объект Date
    • Объект Function
    • Объект Global
    • Объект JSON
    • Объект Math
    • Объект Number
    • Объект Object
    • Объект RegExp
    • Объект Promise
    • Объект String
  • jQuery
    • Селекторы
    • События
    • Методы DOM
    • Перемещения
    • Утилиты
    • Эффекты
    • AJAX
    • Объект Callbacks
    • Объект Deferred

HTML


  • HTML учебник

  • Справочник тегов

  • Атрибуты событий

  • Глобальные атрибуты

  • Мнемоники

  • Коды языков

  • HTML цвета

  • Тесты знаний

CSS


  • CSS учебник

  • Справочник свойств

  • CSS селекторы

  • CSS функции

  • CSS правила

  • Flexbox генератор

  • Grid генератор

  • LESS учебник

JavaScript


  • Интерфейсы веб API

  • Объект Array

  • Объект Date

  • Объект Function

  • Объект Global

  • Объект JSON

  • Объект Math β

  • Объект Number

  • Объект Object

  • Объект Promise

  • Объект RegExp

  • Объект String

jQuery


  • jQuery селекторы

  • jQuery события

  • jQuery методы DOM

  • jQuery перемещения

  • jQuery утилиты

  • jQuery эффекты

  • jQuery AJAX

  • jQuery объект Callbacks

  • jQuery объект Deferred

CSS свойства

  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • break-after
  • break-before
  • break-inside
  • caption-side
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • @font-face
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • grid
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-gap
  • grid-row
  • grid-row-start
  • grid-row-gap
  • grid-row-end
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows
  • justify-content
  • justify-items
  • justify-self
  • height
  • @keyframes
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • @media
  • min-height
  • min-width
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-wrap
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • place-items
  • place-self
  • position
  • quotes
  • resize
  • right
  • tab-size
  • table-layout
  • text-align

Изучаем CSS-позиционирование за 10 шагов

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float.

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

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


#content{
 position: static;
}

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:


#content{
 position: relative;
 top: 20px;
 left: -40px;
}

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

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

3. position: absolute

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

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:


#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.


#div-1a {
 position:fixed;
 top:0;
 right:0;
 width:200px;
}

В IE с position: fixed не все так гладко, как бы нам хотелось, но существует множество способов обойти эти ограничения.

5. position:relative + position:absolute

Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.


#content {
 position:relative;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

6. Две колонки

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


#content {
 position:relative;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.


#content {
 position:relative;
 height: 450px;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

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

8. Float

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

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


#div-1a {
 float:left;
 width:200px;
}

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.


#div-1a {
 float:left;
 width:150px;
}

#div-1b {
 float:left;
 width:150px;
}

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.


#div-1a {
 float:right;
 width:150px;
}

#div-1b {
 float:left;
 width:150px;
}

Но теперь у нас появилась другая проблема – колонки выходят за пределы родительского контейнера, тем самым ломая всю верстку. Эта самая распространенная проблема начинающих верстальщиков, хотя решается она довольно просто.

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.


#div-1a {
 float:left;
 width:190px;
}

#div-1b {
 float:left;
 width:190px;
}

#div-1c {
 clear:both;
}

Или же назначить родительскому контейнеру свойство overflow: hidden


#content {
 overflow:hidden;
}

В любом случае, результат будет один и тот же.

Заключение

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

Перевод скринкаста “Learn CSS Positioning in Ten Steps”.

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

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

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

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

static

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

relative

Когда 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 сверху вниз относительно его естественного положения, где он полагался быть.

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

absolute

Когда 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 отбрасывается.

fixed

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

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

Макет

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


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


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

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

Имеется пять различных значений позиции:

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

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


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

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-индекс Устанавливает порядок стека элемента

.

html — Какое значение по умолчанию для атрибута «позиция» в DIV?

Переполнение стека

  1. Около
  2. Продукты

  3. Для команд
  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

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 Div Позиционирование после абсолютного Div

Переполнение стека

  1. Около
  2. Продукты

  3. Для команд
  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *