Какие свойства позиционируют и не влияют на поток

«Какие свойства позиционируют и не влияют на поток» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

position: absolute и fixed выводят элемент из потока документа, не занимая места. relative сохраняет место в потоке, но позволяет смещать элемент. sticky ведёт себя как relative, пока не достигнет заданного порога, затем фиксируется.

Пример:

.box {
  position: absolute;
  top: 20px;
  left: 30px;
}

float также выводит элемент из потока, но текст обтекает его:

.img {
  float: left;
}

Эти свойства не влияют на соседние элементы в потоке (кроме relative).