Основы позиционирования

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

В CSS позиционирование — это набор свойств, которые позволяют управлять положением элементов на веб-странице. По умолчанию элементы располагаются в соответствии с обычным потоком документа HTML. Однако с помощью позиционирования CSS можно извлечь элементы из обычного потока и разместить их в определённых местах относительно содержащего их элемента или области просмотра (видимой области окна браузера).

Для свойства position существует несколько значений, каждое из которых имеет своё собственное поведение:

static: Это значение по умолчанию. Элемент позиционируется в соответствии с обычным потоком документа. Свойства top, right, bottom и left не влияют на него.

relative: Элемент позиционируется относительно своего обычного положения. Установка свойств top, right, bottom и left переместит элемент с его обычного положения, но он по-прежнему занимает место в обычном потоке.

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

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

Вот базовый синтаксис использования свойства position:

selector {
    position: value;
}

value: Желаемое поведение позиционирования (например, static, relative, absolute, fixed, sticky).

Задание

Легко

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

Напишите правило CSS, которое выбирает элемент <div> с классом container. Установите для него свойство position равным relative. Это сделает его позиционируемым предком для дочерних элементов.
Напишите правило CSS, которое выбирает элемент <div> с классом box. Установите для него свойство position равным absolute. Это исключит его из обычного потока и позволит позиционировать его относительно ближайшего позиционируемого предка — container.
Установите для элемента .box свойство top равным 50px, а свойство left — равным 100px. Это разместит блок на расстоянии 50 пикселей от верхнего края и 100 пикселей от левого края его позиционируемого предка — container.

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

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>