Абсолютное позиционирование

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 57 из 76.

В CSS абсолютное позиционирование позволяет разместить элемент именно там, где вы хотите, внутри его контейнера.

Когда вы устанавливаете position: absolute;, элемент удаляется из нормального потока документа, поэтому другие элементы ведут себя так, будто его нет. Он позиционируется относительно ближайшего предка с установленным позиционированием (отличным от static). Если такого предка нет, он позиционируется относительно страницы.

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

.parent {
    position: relative; /* Сделать родителя позиционированным предком */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: CSS-селектор, который выбирает родительский элемент. Установка position: relative; позволяет использовать абсолютно позиционированные дочерние элементы.

.child: CSS-селектор, выбирающий элемент, который вы хотите позиционировать абсолютно.

position: absolute;: Это объявление устанавливает схему позиционирования элемента как абсолютную, удаляя его из нормального потока.

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

Например:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

В этом примере элемент .parent установлен как позиционированный предок с position: relative;. Элемент .child позиционирован абсолютно с position: absolute;, и его положение установлено на 50 пикселей сверху и 100 пикселей слева от его ближайшего позиционированного предка (элемента .parent).

Задание

Легко

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

Напишите CSS-правило для элемента <div> с классом parent. Установите его свойство position в значение relative, чтобы сделать его позиционированным предком.
Напишите CSS-правило для элемента <div> с классом box2.
Установите свойство position элемента .box2 в значение absolute.
Установите свойство top элемента .box2 в значение 30px, а свойство right — в значение 20px. Это расположит блок в 30 пикселях сверху и в 20 пикселях справа от его позиционированного предка (parent).

Шпаргалка

Абсолютное позиционирование размещает элемент именно там, где вы хотите, внутри его контейнера. Элемент удаляется из нормального потока компоновки и позиционируется относительно ближайшего позиционированного предка.

Базовый синтаксис:

.parent {
    position: relative; /* Сделать родителя позиционированным предком */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Пример:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

position: absolute; удаляет элемент из нормального потока
Свойства top, right, bottom, left определяют положение относительно ближайшего позиционированного предка
Значения могут быть в пикселях (px), em (em), процентах (%) или других единицах CSS
Если позиционированный предок отсутствует, элемент позиционируется относительно страницы

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

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>