Не все можно расположить с помощью отступов - иногда надо наложить один элемент на другой или может быть отображать шапку сайта всегда вверху страницы. Но чаще сделать какие-либо декоративные элементы. Для этого есть CSS-свойство - position - позволяет задавать способ размещения элемента на веб-странице относительно окна браузера или других элементов.
Свойства left, top, right и bottom используются вместе с позиционированием элемента для точного определения его местоположения на странице. Например, можно использовать свойство left (вместе с нужным значением position) со значением 10px, чтобы сместить элемент на 10 пикселей относительно левого края.
Статичное позиционирование. Элементы отображаются как обычно. Является значением по умолчанию. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Используется для позиционирования элемента относительно его ближайшего родительского элемента с позиционированием relative, absolute или fixed. Если такого родительского элемента нет, то элемент позиционируется относительно окна браузера. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Часто position: relative и position: absolute работают вместе. Если надо спозиционировать один элемент относительно другого (например наложить один на другой) то родительскому компоненту position: relative, а тот который нужно наложить position: absolute
Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
Например используют для того, чтобы хедер всегда был вверху экрана
