Давно собирался написать, все руки не доходили. В топике "Смешались в кучу кони, люди" (с), поэтому надо расставить все точки над "ё", чтобы не вводить народ в заблуждение.
Для начала, краткая вводная.
Как браузер размещает элементы. Все элементы бывают двух типов - блочные и строчные. Строчные располагаются браузером в строчку, примерно как слова на письме. Высота строки - высота самого высокого элемента. Если элемент не помещается в строку (слишком широкий), он переносится на следующую. Блочные элементы располагаются по принципу "каждый следующий элемент с новой строки".
Вот пример:
https://codepen.io/anon/pen/WyaxzEУ внешних блоков, помеченных как
"Block 1" и
"Block 2", задана ширина - 400 пикселей. Внутри каждого из них строчные элементы - кнопки. Разной ширины и высоты. В первом блоке вы можете видеть, как браузер выстраивает элементы по умолчанию.
Во втором блоке у одной из кнопок установлено свойство
display: block;, что превращает кнопку из строчного элемента в блочный. Это единственная разница между блоками. Видно, как изменилось расположение элементов.
Теперь перейдем к следующему примеру:
https://codepen.io/anon/pen/wXYWZrТам внутрь каждого блока добавлен блок с пометкой "Position" и номером:
<div class="pos">Position1</div>, а самих блоков уже четыре. Блоки "Position3" и "Position4" имеют свойство
position: absolute;. Это единственное их отличие от блоков "Position1" и "Position2". Как это работает, описано тут:
http://htmlbook.ru/css/positionУ блока Position 3" родительский блок имеет значение по умолчанию для свойства
position (это значение
static). В этом случае положение внутреннего блока отсчитывается от края экрана. Родительский элемент блока "Position 4" имеет свойство
position: relative;, поэтому положение блока "Position 4" отсчитывается от края родительского элемента. И блок "Position3", и "Position4" заданы внутри своих блоков последними, но их расположение полностью игнорирует наличие других элементов.
Теперь почему плохо делать так, как делает
gevaraweb.
Вместо того, чтобы описывать относительное положение элементов, вы можете задать каждому жестко его ширину, высоту и координаты верхней левой точки (свойства Top и Left), и
position: absolute; (это то, что я называю "прибить гвоздями").
В этом случае вам придется (в общем случае) точно знать ширину и высоту всех элементов и следить, чтобы они не наползали друг на друга, то есть взять на себя всю ту работу, с которой прекрасно справляется браузер. При этом вам придется заранее знать размеры экрана пользователя или предполагать, что он не меньше какого-то определенного значения. А если размер больше, то справа останется пустое место. А если пользователь изменит размер экрана, то все поползет. А у особо "талантливых" "дизайнеров" еще и полоса прокрутки не отобразится, и часть элементов пользователь не увидит ни при каких обстоятельствах. И это не говоря уже о том, что шрифт тоже будет "приколочен гвоздями", и увеличивать страницу будет проблематично.
Настоящее предназначение свойства - делать меню и прочие элементы, которые должны оставаться в одном месте экрана при скролле.
-- 28.06.2018, 11:01 --но в любом случае прошу более уважительно относиться к моему мнению
Это не "мнение". Вопрос был -
чем отличаются друг от друга relative, absolute и fixed position?
И для меня очевидно, что вы ответа не знаете.
.