Условие
Переместите красный квадрат
.square
в левый нижний угол серого контейнера
.container.
Между квадратом и краями контейнера должен быть отступ 20px.
Решайте в файле
style.css.
У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что нужно сделать
- Сделайте так, чтобы красный квадрат оказался в левом нижнем углу серого контейнера.
- Между квадратом и краями контейнера должен быть отступ 20px.
- Решение пишите в
style.css(HTML менять не нужно).
Ожидаемый вид
Красный квадрат в левом нижнем углу контейнера с отступом 20px от краёв. Вкладка «Результат» показывает эталон для сравнения.
Подсказка для новичка
Подумайте, относительно какого элемента должен считаться отступ квадрата. Список свойств и значений - в «Дополнительной информации». Сверьте вид с вкладкой «Результат».
Стартовый код
Откройте вкладку
style.css
и допишите CSS так, чтобы результат совпал с вкладкой «Результат». Затем нажмите
Проверить. Файл
index.html
менять не нужно - там уже подключены стили.
Вот так должно получиться
Красный квадрат в левом нижнем углу · отступ 20px
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; внутри -.containerи.square..container- серый родитель (уже естьwidth,height,background,border)..square- красный квадрат (уже есть размер и цвет).position- как элемент участвует в раскладке; значения:static,relative,absolute,fixed,sticky.top/right/bottom/left- отступы при позиционировании.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
В стартовом
style.css
два блока-правила:
.container { ... }
и
.square { ... }.
Точка перед именем - селектор класса: стили применяются ко всем элементам с таким
class
в HTML.
Правило .container
-
width: 400px- ширина серого блока 400 пикселей по горизонтали. -
height: 300px- высота серого блока 300 пикселей по вертикали. -
background: #eee- цвет заливки фона: светло-серый (#eee- короткая запись цвета в формате HEX). -
border: 2px solid #333- рамка вокруг контейнера:2px- толщина,solid- сплошная линия,#333- тёмно-серый цвет. -
Сюда же вам нужно добавить
position: relative- чтобы контейнер стал «точкой отсчёта» для квадрата сposition: absolute.
Правило .square
-
width: 80px- ширина красного квадрата 80 пикселей. -
height: 80px- высота 80 пикселей (равна ширине → получается квадрат). -
background: red- заливка красным цветом (можно писать имя цвета или HEX, например#f00). -
Сюда же дописывают решение:
position: absolute,left: 20pxиbottom: 20px- чтобы квадрат встал в левый нижний угол с отступом 20px.
Все значения position
Свойство
position
говорит браузеру, как элемент участвует в раскладке и относительно чего
считать
top,
right,
bottom,
left.
Без смены
position
эти отступы для обычного блока почти не работают так, как ожидает новичок.
-
position: static- значение по умолчанию. Элемент стоит в обычном потоке документа.top/leftи подобные свойства игнорируются. Если «не двигается» - часто забыли сменитьstatic. -
position: relative- элемент остаётся в потоке, но его можно чуть сдвинуть относительно своего обычного места. Главное для этой задачи: relative-родитель становится «точкой отсчёта» для absolute-потомков. Контейнеру.containerкак раз нуженrelative. -
position: absolute- элемент вынимается из потока и позиционируется относительно ближайшего предка сpositionнеstatic(часто этоrelative). Если такого предка нет - отсчёт идёт от всей страницы (<html>/viewport). В задаче квадрату ставятabsolute+left/bottom. -
position: fixed- тоже вне потока, но привязка к окну браузера (viewport). При прокрутке страницы элемент «прилипает» к экрану (шапка, кнопка «наверх»). Для квадрата внутри серого контейнераfixedобычно не подходит. -
position: sticky- гибрид: пока вы в зоне родителя, ведёт себя какrelative, а при прокрутке «прилипает» какfixed(нужен порог, напримерtop: 0). Удобно для липких заголовков таблиц; в этой задаче не нужен.
Коротко для новичка: родителю -
relative,
ребёнку -
absolute,
затем
left/right/top/bottom
в пикселях или процентах. Без relative у родителя absolute «убежит» к другому предку
или к странице - отсюда ощущение, что «квадрат куда-то ушёл».