У тебя есть холодильник и ты начинаешь на него лепить магнитики разного размера. Подряд.
Первый ты вешаешь в верхний левый угол. Второй справа от него. Третий за ним и т.д. Если следующий магнитик не помещается - то переносишь его на новый ряд. Причем так чтоб его верхний край был как раз под нижним краем самого высокого элемента.
И тут ты повесил очередной магнит (красный), но решил, что он должен быть на 10 милиметров ниже того места
где он должен быть по-умолчанию, ты просто смещаешь его от верху на 10мм. Это и есть относительная (relatuve) его позиция. Top: 10px;
Один магнитик (зеленый) ты решил повесить в конкретном месте холодильника. Например в правом углу на растоянии 20мм от низа холодильника.
Ты не высчитываешь, на сколько его нужно сместить относилельно последнего магнита, ты просто говоришь ему спозиционируйся точно на 20мм от нижнего края. это
position: absolute;
bottom: 20px;
right: 0px;
left: auto;
последний атрибут указывать не обязательно, он говорит браузеру, что отступ слева высчитывай сам, но что будет если указать сразу и отступ и слева и справа. Для магнитов (неизменяемых по ширине) это не даст никаого эфекта и браузер выполнит последнюю команду. А вот для резиновых объектов с переменной шириной - выполнит обе.
Ты решил прилепить к холодильнику жевачку. Слева отступил 0мм, а справа 50% холодильника. Между этими точками - растянул жвачку. (на рисунке дуга).
А еше ты можешь захотеть разместить на холодильнике записку (бежевый), и украсить ее магнитиками. Для этого магнитики ты помещаешь внутрь блока "записка", и они будут выстраиваться уже по ней. И в случае процентов, для всех внутренних магнитов будут браться размеры записки.
Вот например голубой магнит стоит без розиционирования. У фиолетового - позиция абсолютная, отступ сверху - 0, справа 0.
У салатового - отступ снизу 0. А вот сделать такое как с желтым - чуть сложнее.
Можно конечно указать ему отрицательный отступ снизу на высоту магнита. Но лучше указать ему отступ сверху на всю высоту записки. то есть top: 100%. (Что было бы при top:0px и top: 50% - видим в виде пунктирного и оранжевого контура соответственно.)
Важно, если ты не укажешь тип позиционирования для родителя (холодильник), то абсолютное позиционирование его дочерних объектов (магнитов) работать не будет. Точнее они будут расклеены вне холодильника по всей комнате. Поэтому обязательно для холодильника указать position:absolute или position:relative (взависимости от того, как ты его позиционируешь в комнате).
