Где применяется Position в CSS и разница между Flexbox?

Question

[nemovalex]

Начал недавно изучать Frontend, изучил основы CSS и не понимаю одного, где использовать Абсолютное и Относительное позиционирование? На практике и на курсах для позиционирования блоков использовал Flexbox и margin'ы но не могу понять где использовать position и надо ли его вообще использовать ? А хотел бы знать используется ли position в адаптиве так как обычно значения для абсолютного и относительного позиционирования задаются в пикселях.

Comments

[Aetae]

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

[WapSter]

А хотел бы знать используется ли position в адаптиве так как обычно значения для абсолютного и относительного позиционирования задаются в пикселях.

Обычно если элемент относителен, то даже значения в px ни на, что не влияет иначе просто выравнивается медиа запросами. Остальные единицы измерения так же применяются, зависит от задачи.

[nemovalex]

WapSter, Aetae,  Спасибо, сам я пока на практике не применял но исходя из ваших ответов понял что позже придется столкнутся с тем когда придется использовать это свойство

[Роман Дворянов]

nemovalex, это классные свойства, не стоит их воспринимать как что-то сложное или страшное)

Answer 1

[Роман Дворянов]

Абсолютное позиционирование это чаще всего когда ты видишь элемент на сайте, который как бы висит в воздухе, наслаивается, как стрелочки в слайдере.
Например: Меню на этом сайте, когда находится в самом верху страницы, позиционировано абсолютно, при скролле позиционирование меняется на фиксированное и менюха фиксируется в окне.

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

position используется везде, и в адаптиве и ... кто в 2020-м не делает адаптив?

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

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

Comments

[nemovalex]

Вполне развернутый ответ, спасибо