Расположение - свойство position

position Атрибут определяет тип метода позиционирования элемента (static, relative, fixed, absolute или sticky).

свойство position

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

Есть пять различных значений position:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Элементы фактически используют атрибуты top, bottom, left и right для positioning. Но, если только сначала не установлено свойство position, эти свойства не будут работать. Работает по-разному в зависимости от значения position.

position: static;

По умолчанию для HTML элементов способ positioning является static (статический).

Элементы с статической取向 не зависят от свойств top, bottom, left и right.

Элементы с position: static; не定位ятся ни в каком особом порядке; они всегда定位 themselves в соответствии с нормальным потоком страницы:

Этот элемент <div> установлен с position: static;

Это используемый CSS:

пример

div.static {
  position: static;
  граница: 3px твердая #73AD21;
}

попробуйте сами

position: relative;

position: relative; элементы ориентированы относительно их нормального положения.

Установка атрибутов top, right, bottom и left для элементов с относительной取向 приведет к тому, что они отклонятся от их нормального положения для настройки. Оставшееся пространство не будет корректироваться для адаптации к оставшемуся пространству элемента.

Этот элемент <div> установлен с position: relative;

Это используемый CSS:

пример

div.relative {
  position: relative;
  left: 30px;
  граница: 3px твердая #73AD21;
}

попробуйте сами

position: fixed;

position: fixed; элементы ориентированы относительно видимой области, что означает, что даже если прокручивать страницу, они всегда остаются на одном и том же месте. Атрибуты top, right, bottom и left используются для позиционирования этого элемента.

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

Обратите внимание на этот фиксированный элемент в правом нижнем углу страницы. Это используемый CSS:

пример

div.fixed {
  position: fixed;
  bottom: 0;
  правый: 0;
  width: 300px;
  граница: 3px твердая #73AD21;
}

попробуйте сами

Этот элемент <div> установлен с position: fixed;

position: absolute;

position: absolute; элементы расположены относительно ближайшего элемента, имеющего ориентацию (а не относительно видимой области, как fixed).

Однако, если элемент с абсолютной取向 не имеет предков, он использует корпус документа (body) и двигается вместе с прокруткой страницы.

注意:«Ориентированные» элементы их положение за исключением static любых других элементов.

Это простая пример:

Этот элемент <div> установлен с position: relative;
Этот элемент <div> установлен с position: absolute;

Это используемый CSS:

пример

div.relative {
  position: relative;
  width: 400px;
  высота: 200px;
  граница: 3px твердая #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  правый: 0;
  ширина: 200px;
  высота: 100px;
  граница: 3px твердая #73AD21;
}

попробуйте сами

position: sticky;

position: sticky; элементы позиционируются в зависимости от положения прокрутки пользователя.

sticky элементы позиционируются в зависимости от положения прокрутки в относительном (relative) и фиксированный (fixed) между切换. Сначала он будет относительно позиционироваться, до тех пор, пока он не встретит заданное положение в видимой области - затем он будет «прикреплен» на подходящее место (например, position:fixed).

注意:Internet Explorer, Edge 15 и более ранние версии не поддерживают sticky позиционирование. Safari требует префикса -webkit- (см. примеры ниже). Вы также должны至少 указать top,right,bottom или left один из них, чтобы sticky позиционирование работало.

в этом примере, когда элемент sticky достигает своей позиции прокрутки, он останется в верхней части страницы (top: 0)

пример

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  цвет фона: зеленый;
  граница: 2px твердая #4CAF50;
}

попробуйте сами

перекрывающиеся элементы

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

z-index свойство определяет уровень堆.stack order элемента (какой элемент должен быть размещен перед или за другим элементом).

элементы могут иметь положительный или отрицательный уровень堆.stack order:

Это заголовок

из-за того, что z-index изображения равен -1, оно находится за текстом.

пример

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

попробуйте сами

элементы с более высоким уровнем堆叠 всегда находятся перед элементами с более низким уровнем堆.stack order.

注意:если два элемента позиционирования перекрываются и не указан z-indexвtedy последний элемент в HTML коде будет отображаться в верхней части.

позиционирование текста в изображении

как разместить текст на изображении:

пример

Логотип CodeW3C.com
Нижний левый
Верхний левый
Верхний правый
Нижний правый
Центрированный

попробуйте сами:

Верхний левый Верхний правый Нижний левый Нижний правый Центрированный

более примеров

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

все CSS свойства позиционирования

свойства описание
bottom установить нижний внешнюю границу маргинального поля фрейма позиционирования.
clip Обрезает элементы с абсолютным позиционированием.
left Устанавливает левый отступ внешней граница блока позиционирования.
position Определяет тип позиционирования элемента.
right Устанавливает правый отступ внешней граница блока позиционирования.
top Устанавливает верхний отступ внешней граница блока позиционирования.
z-index Устанавливает порядок叠放元素的.

Дополнительное чтение

Дополнительная литература:Обзор позиционирования CSS

Дополнительная литература:Относительное позиционирование CSS

Дополнительная литература:Абсолютное позиционирование CSS