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

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

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

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

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

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

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

fixed: Элемент удаляется из нормального потока и позиционируется относительно области просмотра (viewport). Он остается зафиксированным на месте даже при прокрутке страницы.

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

selector {
    position: value;
}

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

Задание

Легко

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

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

Шпаргалка

Свойство position управляет тем, как элементы располагаются на веб-странице:

selector {
    position: value;
}

Значения позиционирования:

static: Позиционирование по умолчанию в нормальном потоке документа
relative: Позиционируется относительно своего обычного положения, при этом по-прежнему занимает место в потоке
absolute: Удаляется из нормального потока, позиционируется относительно ближайшего позиционированного предка
fixed: Удаляется из нормального потока, позиционируется относительно области просмотра (viewport), остается неподвижным при прокрутке

Используйте свойства top, right, bottom и left для настройки положения (за исключением static).

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

<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>