На второй ступени Школы бюро дизайнеры и редакторы верстают ХТМЛ‑страницу по собственному дизайну. Преподаватель оценивает соответствие макету и качество кода.
В этом задании и правда можно получить плохую оценку за абсолютное позиционирование. Но не за сам абсолют, а за его неуместное использование. Разберём на примерах.
Как нельзя использовать абсолют
Абсолютное позиционирование вырывает элемент из потока, «кирпичной кладки» страницы, и ставит его строго по заданным координатам. Заманчиво выглядит вариант расставить абсолютом сразу все элементы на странице — быстро, с точностью до пикселя и не заморачиваясь с более сложными способами раскладки.
.page {
position: relative;
}
.logo {
position: absolute;
top: 5px;
}
.nav {
position: absolute;
right: 0;
top: 20px;
}
.heroImg {
position: absolute;
top: 70px;
}
.title {
position: absolute;
top: 465px;
}
.lead {
position: absolute;
top: 570px;
}
.text {
position: absolute;
top: 685px;
}
.footer {
position: absolute;
top: 900px;
}
Но вёрстка всего абсолютом радикально снижает гибкость страницы, её способность адаптироваться к разным размерам экранов и к изменению содержимого. Это критично для современного сайта.
Откроем «абсолютную» вёрстку на другом размере экрана и всё сломается — элементы приколочены намертво к своим координатам и не учитывают ширину экрана. А задавать координаты для каждого из тысяч возможных экранов — мартышкин труд.
Или классические ситуации: появился новый пункт меню, изменился заголовок и текст — и снова всё сломалось. Элементы ничего не знают друг о друге, налезают или наоборот создают дыры.
Некоторые генераторы и конструкторы сайтов создают «абсолютную» вёрстку. Но это сложные программы, генерирующие сотни строк кода автоматикой, учитывающие кучу нюансов и краевых ситуаций. Повторять такое вручную — гиблое дело. Скорее всего, вы получите нежизнеспособную вёрстку.
К перечисленному добавим проблемы при изменении масштаба в браузере, потенциальные проблемы с индексацией из‑за непродуманной структуры. А главное — получится громоздкий, бессвязный, непредсказуемый код с кучей «магических чисел». Поддержка и доработка такой вёрстки будет настоящим адом.
Некоторые генераторы и конструкторы сайтов создают «абсолютную» вёрстку. Но это сложные программы, генерирующие сотни строк кода автоматикой, учитывающие кучу нюансов и краевых ситуаций. Повторять такое вручную — гиблое дело. Скорее всего, вы получите нежизнеспособную вёрстку.
В Школе бюро дизайнеры и редакторы пока осваивают лишь базовые навыки вёрстки. Мы опускаем многие тонкости и нюансы, но пресекаем откровенно нежизнеспособные решения. В реальной жизни никому не нужен сайт без возможности нормального редактирования и выглядящий адекватно лишь на одном размере экрана. Именно такой сайт получится при вёрстке всего абсолютом. Это грубый трюк и, по сути, несделанная работа. Оценка соответствующая, даже если с помощью трюка получилось идеально попасть в макет.
Не верстайте все элементы страницы абсолютом. Изучите и используйте для раскладки блочную модель, флексбокс, гриды. Так вёрстка будет более гибкой, надёжной и расширяемой, её можно будет опубликовать и использовать для решения реальных задач.
Как можно использовать абсолют
Абсолют не возбраняется использовать в решении задач, для которых он и предназначен — вынуть элемент из потока и поставить по координатам, безотносительно окружающих элементов.
Например, расставить фрукты вокруг «Фрутоняни»:
<div class="hero">
<img class="hero__apple" src="…">
<img class="hero__product" src="…">
<img class="hero__banana" src="…">
</div>
.hero {
position: relative;
padding: 72px;
display: flex;
align-items: center;
justify-content: center;
}
.hero img {
/* Нормализация стандартных размеров img */
display: block;
width: 100%;
}
.hero__img {
max-width: 240px;
}
.hero__apple {
position: absolute;
z-index: 2;
max-width: 23%;
left: -3%;
top: -3%;
}
.hero__banana {
position: absolute;
z-index: 2;
max-width: 45%;
right: -7%;
bottom: -5%;
}
Поставить текст поверх фотографии:
<div class="hero">
<img src="…">
<div class="hero__text">
<h1>Electrolux</h1>
<p>Для дома и офиса</p>
</div>
</div>
.hero {
position: relative;
}
.hero__text {
position: absolute;
left: 18px;
bottom: 18px;
}Electrolux
Для дома и офиса
Или сверстать мозолящий глаза счётчик сообщений:
<a href="#" class="hasBadge">
Сообщения
<span class="badge">3</span>
</a>
.hasBadge {
position: relative;
}
.badge {
position: absolute;
left: 100%;
bottom: 70%;
width: 24px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: rgb(227, 0, 22);
color: #fff;
text-align: center;
line-height: 24px;
}
Сообщения3
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.