Фиксированное позиционирование (position: fixed): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в использовании `position: fixed`. Фиксированное позиционирование изымает элемент из обычного потока документа и размещает его относительно окна браузера (viewport). Это означает, что элемент останется на одном и том же месте экрана, даже если страница прокручивается. Вы будете заполнять пропуски в CSS коде, чтобы зафиксировать элементы в различных частях экрана, управлять их положением с помощью свойств смещения (`top`, `right`, `bottom`, `left`) и разбираться со слоями с помощью `z-index`. Задания построены от простого закрепления элемента до создания фиксированных панелей и управления их взаимодействием с остальным контентом.

Список тем

Простое фиксирование элемента

Ваша задача - сделать так, чтобы синий блок оставался неподвижным в верхнем левом углу экрана при прокрутке страницы. Для этого нужно применить правильное значение позиционирования.

CSS

.fixed-box {
  background-color: #3498db;
  color: white;
  padding: 15px;
  width: 150px;
  height: 100px;
  /* --- Задание --- */
  input1: fixed;
  top: 10px;
  left: 10px;
}

                     .fixed-box {
  background-color: #3498db;
  color: white;
  padding: 15px;
  width: 150px;
  height: 100px;
  /* --- Задание --- */
  input1: fixed;
  top: 10px;
  left: 10px;
}

HTML

<div class="fixed-box">
  Фиксированный блок
</div>
<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>

Чтобы зафиксировать элемент относительно окна браузера, используйте свойство `position` со значением `fixed`. Затем можно использовать свойства `top`, `left`, `bottom`, `right` для точного размещения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксирование в правом нижнем углу

Теперь зафиксируйте зеленый блок в правом нижнем углу экрана. Вам нужно использовать свойства позиционирования и указать правильные свойства смещения.

CSS

.fixed-box-bottom-right {
  background-color: #2ecc71;
  color: white;
  padding: 10px;
  width: 100px;
  height: 50px;
  /* --- Задание --- */
  position: input1;
  input2: 15px;
  input3: 15px;
}

                     .fixed-box-bottom-right {
  background-color: #2ecc71;
  color: white;
  padding: 10px;
  width: 100px;
  height: 50px;
  /* --- Задание --- */
  position: input1;
  input2: 15px;
  input3: 15px;
}

HTML

<div class="fixed-box-bottom-right">
  Внизу справа
</div>
<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>

Используйте `position: fixed;`. Для размещения в правом нижнем углу используйте свойства `bottom` и `right` со значением 0 или другим небольшим значением для отступа.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированная шапка (Header)

Создайте фиксированную шапку страницы. Она должна быть прикреплена к верху экрана и растягиваться на всю его ширину.

CSS

header {
  background-color: #9b59b6;
  color: white;
  padding: 10px 0;
  text-align: center;
  /* --- Задание --- */
  input1: fixed;
  input2: 0;
  input3: 0;
  input4: 0;
  /* Добавим z-index, чтобы шапка была поверх контента */
  z-index: 100;
}

body {
  /* Добавим отступ сверху, чтобы контент не залезал под шапку */
  padding-top: 50px; 
}

                     header {
  background-color: #9b59b6;
  color: white;
  padding: 10px 0;
  text-align: center;
  /* --- Задание --- */
  input1: fixed;
  input2: 0;
  input3: 0;
  input4: 0;
  /* Добавим z-index, чтобы шапка была поверх контента */
  z-index: 100;
}

body {
  /* Добавим отступ сверху, чтобы контент не залезал под шапку */
  padding-top: 50px; 
}

HTML

<header>
  Фиксированная шапка
</header>
<main>
  <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>
</main>

Используйте `position: fixed;`. Чтобы шапка была прикреплена к верху, используйте `top: 0;`. Чтобы она растянулась на всю ширину, можно использовать `left: 0;` и `right: 0;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированный подвал (Footer)

Создайте фиксированный подвал страницы. Он должен быть прикреплен к низу экрана и растягиваться на всю его ширину.

CSS

footer {
  background-color: #34495e;
  color: white;
  padding: 10px 0;
  text-align: center;
  /* --- Задание --- */
  position: input1;
  input2: 0;
  input3: 0;
  input4: 0;
  /* Добавим z-index, чтобы подвал был поверх контента */
  z-index: 100;
}

body {
  /* Добавим отступ снизу, чтобы контент не залезал под подвал */
  padding-bottom: 50px; 
}

                     footer {
  background-color: #34495e;
  color: white;
  padding: 10px 0;
  text-align: center;
  /* --- Задание --- */
  position: input1;
  input2: 0;
  input3: 0;
  input4: 0;
  /* Добавим z-index, чтобы подвал был поверх контента */
  z-index: 100;
}

body {
  /* Добавим отступ снизу, чтобы контент не залезал под подвал */
  padding-bottom: 50px; 
}

HTML

<main>
  <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>
</main>
<footer>
  Фиксированный подвал
</footer>

Используйте `position: fixed;`. Чтобы подвал был прикреплен к низу, используйте `bottom: 0;`. Для растягивания на всю ширину используйте `left: 0;` и `right: 0;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Управление наложением: z-index

У вас есть два фиксированных блока. Один должен быть всегда поверх другого. Используйте свойство `z-index`, чтобы управлять порядком их наложения.

CSS

.box {
  width: 120px;
  height: 120px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed; /* Оба блока фиксированы */
}

.box-1 {
  background-color: #e74c3c;
  top: 20px;
  left: 20px;
  /* --- Задание: Сделать этот блок нижним --- */
  input1: 1;
}

.box-2 {
  background-color: #f1c40f;
  top: 70px;
  left: 70px;
  /* --- Задание: Сделать этот блок верхним --- */
  input2: 2;
}

                     .box {
  width: 120px;
  height: 120px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed; /* Оба блока фиксированы */
}

.box-1 {
  background-color: #e74c3c;
  top: 20px;
  left: 20px;
  /* --- Задание: Сделать этот блок нижним --- */
  input1: 1;
}

.box-2 {
  background-color: #f1c40f;
  top: 70px;
  left: 70px;
  /* --- Задание: Сделать этот блок верхним --- */
  input2: 2;
}

HTML

<div class="box box-1">
  Блок 1 (Нижний)
</div>
<div class="box box-2">
  Блок 2 (Верхний)
</div>
<p>Прокрутите страницу, если нужно.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Consectetur adipiscing elit...</p>
<p>Sed do eiusmod tempor...</p>
<p>Incididunt ut labore et dolore...</p>
<p>Magna aliqua...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>

Свойство `z-index` управляет порядком наложения позиционированных элементов. Элемент с большим значением `z-index` будет отображаться поверх элемента с меньшим значением. Оба элемента должны иметь `position` не `static` (например, `fixed`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированная кнопка 'Наверх'

Создайте круглую кнопку с иконкой стрелки вверх, которая будет зафиксирована в правом нижнем углу экрана. Используйте подходящие свойства для позиционирования.

CSS

.back-to-top {
  background-color: #1abc9c;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Делает кнопку круглой */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 24px;
  /* --- Задание --- */
  input1: fixed;
  input2: 20px;
  input3: 20px;
  z-index: 100; /* Чтобы кнопка была поверх */
}

body {
  min-height: 150vh; /* Просто чтобы была прокрутка */
}

                     .back-to-top {
  background-color: #1abc9c;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Делает кнопку круглой */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 24px;
  /* --- Задание --- */
  input1: fixed;
  input2: 20px;
  input3: 20px;
  z-index: 100; /* Чтобы кнопка была поверх */
}

body {
  min-height: 150vh; /* Просто чтобы была прокрутка */
}

HTML

<a href="#" class="back-to-top">
  ↑ <!-- Стрелка вверх -->
</a>
<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>

Задайте элементу `position: fixed;`. Используйте `bottom` и `right` для размещения в углу. Дополнительные стили (форма, фон, размер) уже заданы.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированное уведомление сверху

Создайте полосу уведомления, которая фиксируется у верхнего края экрана. Она должна быть видна поверх остального контента.

CSS

.notification-bar {
  background-color: #e67e22;
  color: white;
  padding: 8px 15px;
  text-align: center;
  /* --- Задание --- */
  input1: fixed;
  input2: 0;
  input3: 0;
  input4: 0;
  input5: 101; /* Больше, чем у шапки, если она есть */
}

body {
  padding-top: 40px; /* Отступ для контента */
}

                     .notification-bar {
  background-color: #e67e22;
  color: white;
  padding: 8px 15px;
  text-align: center;
  /* --- Задание --- */
  input1: fixed;
  input2: 0;
  input3: 0;
  input4: 0;
  input5: 101; /* Больше, чем у шапки, если она есть */
}

body {
  padding-top: 40px; /* Отступ для контента */
}

HTML

<div class="notification-bar">
  Это важное уведомление!
</div>
<main>
  <p>Прокрутите страницу.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam.</p>
  <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>
</main>

Используйте `position: fixed;`, `top: 0;`, `left: 0;`, `right: 0;` (или `width: 100%;`). Не забудьте про `z-index`, чтобы уведомление было поверх других элементов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированная боковая панель (Sidebar)

Создайте простую фиксированную боковую панель слева. Она должна занимать всю высоту экрана.

CSS

.sidebar {
  background-color: #bdc3c7;
  width: 100px; /* Ширина панели */
  padding: 20px;
  color: #2c3e50;
  /* --- Задание --- */
  input1: fixed;
  input2: 0;
  input3: 0;
  input4: 0;
  z-index: 50;
}

.main-content {
  /* Добавим отступ слева, чтобы контент не залезал под панель */
  margin-left: 140px; /* Ширина панели + отступ */
  padding: 10px;
}

                     .sidebar {
  background-color: #bdc3c7;
  width: 100px; /* Ширина панели */
  padding: 20px;
  color: #2c3e50;
  /* --- Задание --- */
  input1: fixed;
  input2: 0;
  input3: 0;
  input4: 0;
  z-index: 50;
}

.main-content {
  /* Добавим отступ слева, чтобы контент не залезал под панель */
  margin-left: 140px; /* Ширина панели + отступ */
  padding: 10px;
}

HTML

<div class="sidebar">
  Боковая панель
  <ul>
    <li>Меню 1</li>
    <li>Меню 2</li>
    <li>Меню 3</li>
  </ul>
</div>
<div class="main-content">
  <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>
</div>

Используйте `position: fixed;`. Чтобы панель была слева, задайте `left: 0;`. Чтобы она занимала всю высоту, используйте `top: 0;` и `bottom: 0;`. Не забудьте задать ширину панели (`width`) и, возможно, `z-index`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированный элемент с изображением

Зафиксируйте блок с изображением в левом верхнем углу. Изображение уже добавлено в HTML.

CSS

.fixed-image-container {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border: 1px solid #ccc;
  /* --- Задание --- */
  input1: fixed;
  input2: 5px;
  input3: 5px;
  z-index: 10;
}

.fixed-image-container img {
  display: block; /* Убирает лишний отступ под изображением */
  width: 80px; /* Уменьшим размер для примера */
  height: auto;
}

                     .fixed-image-container {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border: 1px solid #ccc;
  /* --- Задание --- */
  input1: fixed;
  input2: 5px;
  input3: 5px;
  z-index: 10;
}

.fixed-image-container img {
  display: block; /* Убирает лишний отступ под изображением */
  width: 80px; /* Уменьшим размер для примера */
  height: auto;
}

HTML

<div class="fixed-image-container">
  <img src="https://naytikurs.ru/img/7.png" alt="Fixed Image">
</div>
<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>

Примените `position: fixed;` к контейнеру изображения (`.fixed-image-container`). Используйте `top` и `left` для позиционирования.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Предотвращение наложения контента под шапку

У вас есть фиксированная шапка, но основной контент страницы начинается под ней. Добавьте необходимое свойство к `body` или основному контейнеру, чтобы контент начинался ниже шапки.

CSS

header {
  position: fixed; /* Шапка уже фиксирована */
  top: 0;
  left: 0;
  right: 0;
  height: 60px; /* Высота шапки */
  background-color: #3498db;
  color: white;
  padding: 0 15px;
  line-height: 60px; /* Выравнивание текста по вертикали */
  z-index: 100;
}

body {
  /* --- Задание: Добавить отступ сверху --- */
  input1: 60px; 
}

                     header {
  position: fixed; /* Шапка уже фиксирована */
  top: 0;
  left: 0;
  right: 0;
  height: 60px; /* Высота шапки */
  background-color: #3498db;
  color: white;
  padding: 0 15px;
  line-height: 60px; /* Выравнивание текста по вертикали */
  z-index: 100;
}

body {
  /* --- Задание: Добавить отступ сверху --- */
  input1: 60px; 
}

HTML

<header>
  Фиксированная шапка (60px)
</header>
<main>
  <h1>Начало контента</h1>
  <p>Этот текст не должен быть под шапкой.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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>
</main>

Когда элемент фиксируется, он изымается из потока. Чтобы контент не скрывался под фиксированной шапкой, нужно добавить верхний отступ (`padding-top` или `margin-top`) к элементу `body` или основному контейнеру (`main`, `div#content` и т.д.), равный высоте шапки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированная шапка и подвал одновременно

Сделайте так, чтобы и шапка, и подвал были фиксированными. Шапка сверху, подвал снизу. Не забудьте добавить отступы для основного контента, чтобы он не перекрывался.

CSS

header {
  background-color: #9b59b6;
  color: white;
  text-align: center;
  height: 50px; /* Высота шапки */
  line-height: 50px;
  /* --- Задание для шапки --- */
  input1: fixed;
  input2: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

footer {
  background-color: #34495e;
  color: white;
  text-align: center;
  height: 40px; /* Высота подвала */
  line-height: 40px;
  /* --- Задание для подвала --- */
  input3: fixed;
  input4: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

body {
  /* --- Задание для отступов --- */
  input5: 50px; 
  input6: 40px; 
}

                     header {
  background-color: #9b59b6;
  color: white;
  text-align: center;
  height: 50px; /* Высота шапки */
  line-height: 50px;
  /* --- Задание для шапки --- */
  input1: fixed;
  input2: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

footer {
  background-color: #34495e;
  color: white;
  text-align: center;
  height: 40px; /* Высота подвала */
  line-height: 40px;
  /* --- Задание для подвала --- */
  input3: fixed;
  input4: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

body {
  /* --- Задание для отступов --- */
  input5: 50px; 
  input6: 40px; 
}

HTML

<header>
  Фикс. шапка
</header>
<main>
  <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>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>Конец контента.</p>
</main>
<footer>
  Фикс. подвал
</footer>

Для шапки используйте `position: fixed; top: 0; left: 0; right: 0;`. Для подвала используйте `position: fixed; bottom: 0; left: 0; right: 0;`. Для `body` или основного контейнера добавьте `padding-top` равный высоте шапки и `padding-bottom` равный высоте подвала.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированный блок по центру экрана

Сделайте так, чтобы блок был зафиксирован точно по центру экрана, как по горизонтали, так и по вертикали. Это может быть полезно для модальных окон или уведомлений.

CSS

.centered-box {
  background-color: #16a085;
  color: white;
  padding: 30px;
  width: 200px;
  /* --- Задание --- */
  input1: fixed;
  input2: 50%;
  input3: 50%;
  transform: translate(-50%, -50%); /* Этот трюк центрирует элемент */
  z-index: 200;
}

                     .centered-box {
  background-color: #16a085;
  color: white;
  padding: 30px;
  width: 200px;
  /* --- Задание --- */
  input1: fixed;
  input2: 50%;
  input3: 50%;
  transform: translate(-50%, -50%); /* Этот трюк центрирует элемент */
  z-index: 200;
}

HTML

<div class="centered-box">
  Я всегда по центру!
</div>
<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>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>Конец контента.</p>

Используйте `position: fixed;`. Чтобы спозиционировать по центру, можно использовать `top: 50%; left: 50%;` и затем скорректировать положение с помощью `transform: translate(-50%, -50%);`. В этом задании вам нужно указать только свойства позиционирования.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку