Ответ
position: relative смещает элемент относительно его исходного положения в потоке документа, но сохраняет занимаемое им место.
position: absolute вырывает элемент из потока и позиционирует относительно ближайшего родителя с position: relative/absolute/fixed. Если такого нет — относительно <html>.
position: fixed фиксирует элемент относительно viewport (окна браузера), игнорируя прокрутку.
Пример:
<div class="parent">
<div class="child relative">Relative</div>
<div class="child absolute">Absolute</div>
<div class="child fixed">Fixed</div>
</div>.parent { position: relative; }
.relative { position: relative; top: 20px; }
.absolute { position: absolute; top: 0; }
.fixed { position: fixed; bottom: 0; }Ключевое:
relative— смещение без вырывания из потока.absolute— позиционирование относительно родителя.fixed— привязка к экрану.
Ответ 18+ 🔞
Давай разберём этот пиздец, прости Господи, с позиционированием, а то у некоторых в голове после этого каша, а не вёрстка.
Смотри, position: relative — это как ты встал в очередь за хлебом, и тебе говорят: «Вася, подвинься на полшага влево». Ты подвинулся, но место в очереди за тобой осталось, никто его не занял. Ты сместился, но из потока не выпал. Всё ещё в строю, сука.
А вот position: absolute — это уже жестче. Это как ты взял и вышел из этой очереди нахуй совсем. Твоё место тут же заняли. А сам ты теперь стоишь где хочешь, но относительно какого-то конкретного человека (родителя). Если вокруг никого знакомого нет — будешь ориентироваться на главный вход магазина (то есть на <html>). Полная свобода, но и полная оторванность от коллектива.
Ну и position: fixed — это вообще отбитый вариант. Ты приклеился к стеклу витрины этого магазина. Сколько народ внутри ни ходи, ни очередь никуда не двигается — ты намертво приклеен к окну браузера и смотришь на всех грустными глазами. Игнорируешь всю хуйню с прокруткой.
Вот, смотри на код, тут всё видно:
<div class="parent">
<div class="child relative">Relative</div>
<div class="child absolute">Absolute</div>
<div class="child fixed">Fixed</div>
</div>.parent { position: relative; } /* Вот этот чувак теперь точка отсчёта для absolute! */
.relative { position: relative; top: 20px; } /* Сдвинулся, но место в `parent` держит */
.absolute { position: absolute; top: 0; } /* Вырвался нахуй из потока и прилип к верху `parent` */
.fixed { position: fixed; bottom: 0; } /* Присосался к низу экрана намертво */Короче, запомни раз и навсегда:
relative— сместился, но в строю. Как солдат на месте сделал шаг в сторону.absolute— вырвался из строя и стоит где скажут, относительно командира (родителя).fixed— присосался к окну броузера. Всё ебет, кроме viewport.
Вот и вся магия, ебать её в сраку.