Разница между свойствами position: relative и position: absolute заключается в способе позиционирования элемента на странице. 35

position: relative определяет, как элемент располагается относительно своего стандартного местоположения на странице. 3 При использовании этого значения можно задать дополнительные параметры, такие как top, bottom, left и right, которые указывают на смещение элемента относительно его стандартного местоположения. 3 При этом смещение не влияет на положение любых других элементов. 5

position: absolute задаёт точное местоположение элемента на странице, независимо от других элементов на странице. 3 При использовании этого значения можно задать параметры top, bottom, left и right, чтобы определить точное местоположение элемента. 3 При этом элемент «отделяется» от потока документа и перестаёт в нём существовать. 2 Его местоположение задаётся относительно краёв окна браузера, в так называемой «видимой области». 2

Таким образом, при использовании position: relative элемент смещается относительно себя самого, при этом другие элементы не затрагиваются. 4 При использовании position: absolute элемент располагается относительно ближайшего позиционированного родительского элемента, если такого нет, то позиционирование будет осуществляться непосредственно по отношению к элементу HTML (самой странице). 45