Относительное позиционирование

Кроме display, на макет страницы влияет свойство position. Чтобы хорошо увидеть, что оно делает, на время попробуем его на простой странице с тремя квадратами. К странице о кошке мы вернёмся позже.

Значение position по умолчанию — static. Статичный элемент остаётся там, куда его ставит нормальный поток. Все элементы, которые вы видели до сих пор, были статичными.

Элемент с position: relative тоже остаётся в нормальном потоке, но, в отличие от статичного, его можно сдвинуть с места свойствами top, right, bottom и left, которые называются смещениями. Каждое смещение задаёт, насколько элемент отодвигается от соответствующей стороны своего исходного места: top: 30px сдвигает его на 30 пикселей вниз, left: 30px — на 30 пикселей вправо.

Остальные элементы сдвига не замечают. Они ведут себя так, будто элемент по-прежнему на исходном месте, поэтому его место остаётся пустым.

В редакторе квадраты — это элементы div с display: inline-block, поэтому они стоят в ряд. У второго есть id square2.