В чем разница между различными способами позиционирования элементов в CSS?

Name: Sobes.tech
Rating: 4.9 (250 reviews)

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

static - Положение по умолчанию. Элемент позиционируется согласно стандартному потоку документа. Свойства top, right, bottom, left не влияют.
relative - Элемент позиционируется относительно его нормального положения в потоке. Свойства top, right, bottom, left сдвигают элемент от его исходной позиции, но занимаемое им место в потоке сохраняется.
absolute - Элемент полностью удаляется из нормального потока документа. Его положение определяется свойствами top, right, bottom, left относительно ближайшего позиционированного предка (с position: relative, absolute, fixed или sticky). Если таких предков нет, позиция определяется относительно начального блока <html>.
fixed - Элемент полностью удаляется из нормального потока документа. Его положение определяется свойствами top, right, bottom, left относительно окна просмотра (viewport). Элемент остается на месте при прокрутке страницы.
sticky - Элемент позиционируется как relative до тех пор, пока при прокрутке он не достигнет заданной позиции (определяемой top, right, bottom, left), после чего его позиция становится fixed.

Таблица различий:

Свойство	`static`	`relative`	`absolute`	`fixed`	`sticky`
Поток документа	Обычный	Сохраняет	Удаляется	Удаляется	Сначала обычный, затем удаляется
Сдвиг (`top` etc.)	Нет	Относительно себя	Относительно предка/viewport	Относительно viewport	Относительно себя, затем viewport
При прокрутке	Прокручивается	Прокручивается	Остается на месте (если предок `fixed`) или прокручивается с предком	Остается на месте	Сначала прокручивается, затем остается на месте

Пример:

.static-box {
  position: static; /* Положение по умолчанию */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Сдвиг вниз от нормального положения */
  left: 20px; /* Сдвиг вправо от нормального положения */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Позиционированный предок */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* Относительно контейнера */
  left: 50px; /* Относительно контейнера */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Относительно viewport */
  right: 10px; /* Относительно viewport */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Прилипает к верху viewport */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Для перекрытия других элементов при прилипании */
}