Условие
В style.css слой .backdrop должен закрывать весь экран. Окно .modal - строго по центру экрана и поверх слоя. Крестик .modal-close - в правый верх окна (отступ 8px). У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что нужно сделать
- Закройте экран затемняющим слоем
.backdrop. - Поставьте окно
.modalстрого по центру экрана. - Прижмите крестик в правый верх окна (отступ 8px).
Подсказка для новичка
Слой и модалка считают позицию от окна браузера; крестик - от самого окна. Как центрировать и какие свойства брать - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Оверлей · модалка по центру · крестик
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">/<head>/<meta charset="UTF-8" />/<title>/<link rel="stylesheet" href="style.css" />- шапка документа.<body>- видимое содержимое.<div class="backdrop">- затемняющий слой на весь экран.<div class="modal">- белое модальное окно.<button class="modal-close" type="button">- крестик закрытия;type="button".<p>внутри модалки - текст «Окно».position: fixed/absolute,inset,top/left,transform: translate,z-index- позиция модалки.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
Есть стили
body,
фон
.backdrop,
размеры/вид
.modal,
текст
.modal p
и кнопка
.modal-close.
Позиционирования ещё нет - элементы в обычном потоке.
Правило body
-
margin: 0- без внешних отступов страницы. -
min-height: 100vh- минимум на всю высоту окна браузера. -
background: #e2e8f0/font-family: Arial, sans-serif- светлый фон и шрифт.
Правила .backdrop, .modal, .modal-close
-
.backdropуже имеетbackground: rgba(15, 23, 42, 0.55). В решении:position: fixed,inset: 0(на весь экран),z-index: 10. -
.modal-width: 280px,padding: 28px 20px 20px, белый фон,border: 2px solid #334155,box-sizing: border-box. В решении:position: fixed,top: 50%,left: 50%,transform: translate(-50%, -50%)(центр экрана),z-index: 11(выше backdrop). -
.modal p-margin: 0,font-size: 18px,font-weight: 700,text-align: center,color: #0f172a. -
.modal-close- размер 28×28,padding: 0,border: 0, красный фон#e53935, белый текст,line-height: 28px,cursor: pointer. В решении:position: absolute,top: 8px,right: 8px(угол модалки). Для absolute у крестика у модалки должен бытьpositionнеstatic(здесь - fixed).
Fixed и центрирование
position: fixed
привязывает элемент к окну браузера (viewport), а не к родителю в потоке.
inset: 0
растягивает backdrop на весь экран.
Центр модалки: левый верхний угол ставят в середину (
top/left: 50%
), затем сдвигают на половину своей ширины/высоты через
translate(-50%, -50%).
Коротко: backdrop -
fixed
+
inset: 0;
modal -
fixed
+ центр через
50%
и
translate;
крестик -
absolute
в правом верхнем углу. Сверьте с вкладкой
«Результат».