Relative

Relative не задан - элементы в потоке, т.е. отображаются по порядку выполнения кода.

<div class="bow-wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>        

position: relative

Границы элемента в потоке сохраняются, но сам элемент приподнимается над потоком и может перемещаться с помощью свойств: top, right, bottom и left

Начало отсчета и направление

top:    
right:    RESET
bottom: 
left:   
                
            

Элемент с position: relative выделен красным фоном

Приоритеты

Left над Right

Top над Bottom

Если заданы одновременно left и right,
то приоритет имеет left. Это выражается в том, что для right присваивается значение -left

Если заданы одновременно top и bottom,
то приоритет имеет top. Это выражается в том, что для bottom присваивается значение -top

Обнуление

Для того, чтобы пары left и right или top и bottom получили начальные значения, необходимо присвоить:

• для top 0, initial или unset
• для right только initial или unset
• для bottom только initial или unset
• для left 0, initial или unset

Перекрытие

Если два соседних элемента находтся в position: relative, то в случае перекрытия порядок наложения такой же как и порядок в потоке. Элемент, находящийся в потоке раньше, окажется ниже и будет перекрыт.

Z-index

Изменить порядок отображения в случае перекрытия можно с помощью z-index.

По умолчанию у всех элементов z-index 0. Большее число - поднимает элемент над другими элементами с меньшим числом z-index.

Кликните по элементу и установите z-index