В чём разница между свойствами position: relative и position: absolute?

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

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

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

Таким образом, при использовании position: relative элемент смещается относительно себя самого, при этом другие элементы не затрагиваются. www.internet-technologies.ru При использовании position: absolute элемент располагается относительно ближайшего позиционированного родительского элемента, если такого нет, то позиционирование будет осуществляться непосредственно по отношению к элементу HTML (самой странице). www.internet-technologies.ru developer.mozilla.org