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

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 56 из 76.

В CSS относительное позиционирование — это схема позиционирования, которая позволяет расположить элемент относительно его обычного положения в потоке документа. Когда для элемента установлено значение position: relative;, он остаётся в обычном потоке, но затем вы можете использовать свойства top, right, bottom и left, чтобы сместить его относительно исходного положения.

Вот базовый синтаксис использования относительного позиционирования:

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative;: это объявление задаёт для элемента относительную схему позиционирования.
top, right, bottom, left: эти свойства задают смещение элемента относительно его обычного положения. Можно использовать положительные или отрицательные значения, указанные в пикселях (px), em (em), процентах (%) или других допустимых единицах CSS.

Например:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

В этом примере элемент с классом box будет позиционирован на 20 пикселей ниже и на 30 пикселей правее своего обычного положения в потоке документа. Пространство, которое он изначально занимал, будет сохранено, и другие элементы не займут это пространство.

Задание

Легко

Вам дан HTML-документ с элементом <div>, который содержит три дочерних элемента <div> с классами box1, box2 и box3. Ваша задача — использовать относительное позиционирование, чтобы переместить элемент box2. Выполните следующие шаги:

Напишите правило CSS, нацеленное на элемент <div> с классом box2.
Установите для свойства position элемента .box2 значение relative.
Установите для свойства top элемента .box2 значение 20px, а для свойства left — значение 40px. Это переместит box на 20 пикселей вниз и на 40 пикселей вправо от его обычного положения.

Попробуйте сами

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>