Что не так с position:absolute?

Question

[lemonlimelike]

Вот говорят, что если на элемент повесить position:absolute он выйдет из потока. Ну а что изменится если он выйдет с потока?

Answer 1

[Stalker_RED]

Он действительно выйдет из потока, но в этом нет ничего ужасного, он и должен выходить.
Пара простых примеров:

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

.rel .foo {
  position: relative;
  bottom: 10px;
  right: 30px;
  background-color: red;
}

Абсолютно спозиционированный элемент из потока выпадет и улетит в нижний правый угол страницы

.abs .foo {
  position: absolute;
  bottom: 10px;
  right: 30px;
  background-color: green;
}

Всё в сборе: https://jsfiddle.net/c3mm5m7k/

По умолчанию у всех элементов position: static, и кроме absolute и relative бывает еще fixed и sticky.
https://developer.mozilla.org/ru/docs/Web/CSS/position

Comments

[Олег]

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

[Сергей delphinpro]

Олег: Я не поленился пруфчик найти, цитата с MDN:

an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements

[Сергей delphinpro]

И контрольный, в голову =)
Цитата из спецификации w3c:

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings).

[Stalker_RED]

Я просто оставлю это здесь:

CSS2 - Visual formatting model - 9.8 Comparison of normal flow, floats, and absolute positioning
https://www.w3.org/TR/CSS2/visuren.html#comparison

Answer 2

[Олег]

Почитай, что такое поток в документе.К позиционированию не имеет отношения