Некоторые методы вёрстки не подчиняются правилам потока и позволяют отображать элементы на веб-странице не в том порядке, как они идут в коде HTML. Про такие элементы говорят, что они находятся вне потока.
Вот некоторые методы вёрстки, которые могут выводить элементы из потока:
- позиционирование;
- обтекание;
- флексы.
Позиционирование
Различают несколько способов позиционирования: абсолютное, относительное, фиксированное, липкое. Абсолютное и фиксированное позиционирование выводят элемент из потока. Тип позиционирования задаётся с помощью свойства position.
Абсолютное позиционирование
Абсолютное позиционирование — это способ размещения элемента на веб-странице, при котором его положение задаётся относительно ближайшего позиционированного родителя или окна браузера, если такой родитель отсутствует. Сами координаты определяются с помощью свойств left, right, top, bottom. В примере 1 показано расположение изображения по центру веб-страницы.
Пример 1. Изображение по центру
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
.center {
position: absolute; /* Абсолютное позиционирование */
left: 50%; top: 50%; /* Положение левого верхнего края */
transform: translate(-50%, -50%); /* Смещаем на половину размера */
}
</style>
</head>
<body>
<img src="image/snow-fox.webp" alt="Песец" width="400" class="center">
<p>Песец, также известный как полярная лисица,
обладает густой белой шерстью, которая помогает
ему выживать в холодных условиях.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Абсолютно позиционированное изображение
Изображение с абсолютным позиционированием может располагаться в любом месте HTML-кода, поскольку на него не влияют близлежащие элементы. И оно же, будучи вне потока, не оказывает влияния на положение текста. При этом позиционированная картинка при небольшой высоте веб-страницы перекрывает текст.
Фиксированное позиционирование
При фиксированном позиционировании элемент остаётся на одном месте, даже при прокрутке веб-страницы. Это удобно использовать для шапки или подвала сайта, меню и различных элементов интерфейса.
В примере 2 показано создание фиксированной кнопки, которая располагается в правом нижнем углу веб-страницы, и не меняет своё положение при её прокрутке.
Пример 2. Фиксированная кнопка
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
body {
height: 2000px; /* Высота веб-страницы */
}
.search {
position: fixed; /* Фиксированное позиционирование */
right: 20px; bottom: 20px; /* Положение правого нижнего края */
background-color: #2a87b3; /* Цвет фона */
border: 0; /* Убираем рамку */
border-radius: 50%; /* Делаем кнопку круглой */
width: 40px; height: 40px; /* Размеры кнопки */
}
.search > img {
filter: invert(1); /* Делаем чёрную картинку белой */
}
</style>
</head>
<body>
<button class="search"><img src="image/button-search.svg" alt="Поиск" width="20"></button>
<p>Песец, также известный как полярная лисица,
обладает густой белой шерстью, которая помогает
ему выживать в холодных условиях.</p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Фиксированная кнопка
Элемент, фиксированный на одном месте через свойство position, может располагаться в любом месте HTML-кода, из-за того что он выведен из потока и не оказывает влияния на близлежащие элементы.
Обтекание
Обтекание — это метод вёрстки, при котором элементы размещаются на веб-странице таким образом, чтобы текст и другие элементы могли их обтекать. Обтекание часто применяется для встраивания иллюстраций в текст (рис. 3).
Рис. 3. Текст обтекает изображение
Для обтекания используется свойство float со следующими значениями:
- left — элемент прижимается к левому краю, а текст обтекает его сверху, справа и снизу;
- right — элемент прижимается к правому краю, а текст обтекает его сверху, слева и снизу.
В примере 3 свойство float применяется к иллюстрации, которая создана через элемент <img>.
Пример 3. Использование float
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
.right {
float: right; /* Прижимается к правому краю */
margin-left: 1rem; /* Расстояние слева */
}
</style>
</head>
<body>
<img src="image/fox-crane.webp" alt="Лиса и журавль" width="200" class="right">
<p>Лиса с журавлём подружились.</p>
<p>Вот вздумала лиса угостить журавля, пошла звать его к себе в гости:</p>
<p>— Приходи, куманёк, приходи, дорогой! Уж я тебя угощу!</p>
<p>Пошёл журавль на званный пир. А лиса наварила манной каши и размазала по тарелке. Подала и потчевает:</p>
<p>Журавль стук-стук носом по тарелке, стучал, стучал — ничего не попадает!</p>
<p>А лисица лижет себе да лижет кашу, так всё сама и съела.</p>
<p>Кашу съела и говорит:</p>
<p>— Не обессудь, куманёк! Больше потчевать нечем.</p>
<p>Журавль ей отвечает:</p>
<p>— Спасибо, кума, и на этом! Приходи ко мне в гости.</p>
<p>На другой день приходит лиса к журавлю, а он приготовил окрошку, наклал в кувшин с узким горлышком, поставил на стол и говорит:</p>
<p>— Кушай, кумушка! Право, больше нечем потчевать.</p>
<p>Лиса начала вертеться вокруг кувшина. И так зайдёт, и эдак, и лизнёт его, и понюхает, — никак достать не может: не лезет голова в кувшин.
<p>А журавль клюёт себе да клюёт, пока всё не съел.</p>
<p>— Ну, не обессудь, кума! Больше угощать нечем!</p>
<p>Взяла лису досада. Думала, что наестся на целую неделю, а домой пошла — не солоно хлебала. Как аукнулось, так и откликнулось!</p>
<p>С тех пор и дружба у лисы с журавлём врозь.</p>
</body>
</html>
Здесь обтекаемый элемент <img> выводится из потока и прижимается к правому краю браузера, хотя в HTML-коде <img> идёт первым.
Флексы
Вёрстка с помощью флексов позволяет довольно гибко управлять положением элементов и их компоновкой на веб-странице. Флексы могут выстраиваться слева направо, справа налево, сверху вниз и даже снизу вверх. Для этого применяется свойство flex-direction, которое меняет направление, в котором размещаются элементы, и, тем самым, порядок их отображения (пример 4).
Пример 4. Использование flex-direction
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
.flex-container {
display: flex; /* Флексы */
flex-direction: row-reverse; /* Направление справа налево */
flex-wrap: wrap; /* Перенос на другую строку */
}
span {
border: 1px solid #008eb0; /* Параметры рамки */
padding: 0 5px; /* Расстояние от текста до рамки */
margin: 5px; /* Расстояние вокруг элемента */
}
</style>
</head>
<body>
<div class="flex-container">
<span>Афганская лисица</span>
<span>Корсак</span>
<span>Песец</span>
<span>Песчаная лисица</span>
<span>Рыжая лисица</span>
<span>Тибетская лисица</span>
<span>Фенек</span>
</div>
</body>
</html>
Результат данного примера показан на рис. 4. Из-за того, что поменялось направление строчной оси, первый элемент в контейнере начинается справа, а последний слева.
Рис. 4. Флекс-элементы
Также есть свойство order, с помощью которого можно менять порядок отображения элементов. Чем меньше число в значении order, тем раньше появится элемент. Поскольку в order используется значение по умолчанию 1, то чтобы сделать последний элемент первым, достаточно задать ему значение -1, как это показано в примере 5.
Пример 5. Использование order
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
.flex-container {
display: flex; /* Флексы */
flex-direction: row-reverse; /* Направление справа налево */
flex-wrap: wrap; /* Перенос на другую строку */
}
span {
border: 1px solid #008eb0; /* Параметры рамки */
padding: 0 5px; /* Расстояние от текста до рамки */
margin: 5px; /* Расстояние вокруг элемента */
}
span:nth-child(7) { order: -1; }
</style>
</head>
<body>
<div class="flex-container">
<span>Афганская лисица</span>
<span>Корсак</span>
<span>Песец</span>
<span>Песчаная лисица</span>
<span>Рыжая лисица</span>
<span>Тибетская лисица</span>
<span>Фенек</span>
</div>
</body>
</html>
Результат данного примера показан на рис. 5. Обратите внимание, что слово Фенек переместилось на первую позицию.
Рис. 5. Флекс-элементы
Такие свойства как order вообще не считаются с потоком, позволяя перетасовывать элементы произвольным образом.
Итоги
- Некоторые стилевые свойства (position, float, flex-direction) выводят элемент из потока.
- Элемент вне потока отображается на веб-странице не в том порядке, как он идёт в коде HTML.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 07.06.2025