В чем отличие относительного позиционирования от абсолютного в веб-разработке?

Основное отличие относительного позиционирования от абсолютного в веб-разработке заключается в том, как элемент размещается на странице. apptask.ru ru.eitca.org

Относительное позиционирование позволяет расположить элемент относительно его исходного положения в обычном потоке документа. ru.eitca.org При таком типе позиционирования элемент остаётся в потоке документа и занимает место в макете, как если бы он был статичным. ru.eitca.org Однако с помощью свойств top, right, bottom и left можно сместить элемент с его исходного положения. ru.eitca.org Например, если элементу присваиваются position: relative; и top: 10px;, он будет отображаться на 10 пикселей ниже своего исходного положения, но он всё равно сохранит своё место в потоке документа. ru.eitca.org

Абсолютное позиционирование, в свою очередь, полностью удаляет элемент из обычного потока документа. ru.eitca.org Абсолютно позиционируемый элемент позиционируется относительно своего ближайшего позиционированного предка, которым является любой предок с позицией, отличной от статической. ru.eitca.org Если такого предка не существует, он позиционируется относительно начального содержащего блока, которым обычно является область просмотра. ru.eitca.org Это означает, что абсолютное позиционирование позволяет точно контролировать размещение элемента, но также означает, что элемент больше не влияет на компоновку последующих элементов в потоке документа. ru.eitca.org Например, элемент с position: absolute; и top: 0; left: 0; будет помещён в верхний левый угол своего содержащего элемента, независимо от того, где он находится в документе HTML. ru.eitca.org