Статичное позиционирование (position: static): Тренажер CSS

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

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

Список тем

Поведение по умолчанию

В этом задании вы увидите стандартное поведение элемента без явно заданного позиционирования. Дополните CSS-код так, чтобы явно указать статичное позиционирование для блока. Обратите внимание, что визуально ничего не изменится, так как `static` — это значение по умолчанию.

CSS

.box {
  background-color: #87ceeb;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  /* Допишите код для явного указания статичного позиционирования */
  input1: input2;
}

                     .box {
  background-color: #87ceeb;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  /* Допишите код для явного указания статичного позиционирования */
  input1: input2;
}

HTML

<div class="box">Блок 1</div>
<div class="box" style="background-color: #90ee90;">Блок 2</div>

Свойство `position` отвечает за тип позиционирования элемента. Чтобы задать статичное позиционирование, используйте значение `static`. Допишите свойство `position` со значением `static` для селектора `.box`.

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

Результат

Сообщения

Выполнить

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

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

Игнорирование смещений

Статично позиционированные элементы не реагируют на свойства смещения `top`, `right`, `bottom`, `left`. Допишите CSS-код, установив `position: static`, и убедитесь, что добавленные свойства `top` и `left` не влияют на положение элемента.

CSS

.box {
  background-color: #ffa07a;
  width: 80px;
  height: 80px;
  top: 30px; /* Попытка смещения */
  left: 40px; /* Попытка смещения */
  /* Укажите статичное позиционирование, чтобы смещения не работали */
  input1
}

                     .box {
  background-color: #ffa07a;
  width: 80px;
  height: 80px;
  top: 30px; /* Попытка смещения */
  left: 40px; /* Попытка смещения */
  /* Укажите статичное позиционирование, чтобы смещения не работали */
  input1
}

HTML

<p>Текст перед блоком.</p>
<div class="box"></div>
<p>Текст после блока.</p>

Для элемента с классом `.box` уже заданы свойства `top` и `left`. Чтобы они не возымели эффекта, необходимо установить тип позиционирования `static`. Допишите `position: static;`.

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

Результат

Сообщения

Выполнить

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

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

Нормальный поток: Блочные элементы

Блочные элементы (`div`, `p`, `h1` и т.д.) в обычном потоке документа располагаются друг под другом. Убедитесь, что оба блока `div` следуют этому правилу. Допишите CSS так, чтобы явно указать статичное позиционирование для всех `div`.

CSS

div {
  width: 90%;
  height: 50px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Задайте статичное позиционирование для всех div */
  input1: input2;
}

.item-1 {
  background-color: #add8e6;
}

.item-2 {
  background-color: #lightcoral;
}

                     div {
  width: 90%;
  height: 50px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  /* Задайте статичное позиционирование для всех div */
  input1: input2;
}

.item-1 {
  background-color: #add8e6;
}

.item-2 {
  background-color: #lightcoral;
}

HTML

<div class="item-1">Первый блок</div>
<div class="item-2">Второй блок</div>

По умолчанию `div` имеют `position: static`. Чтобы явно это указать для всех `div` на странице, используйте селектор `div` и добавьте правило `position: static;`.

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

Результат

Сообщения

Выполнить

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

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

Нормальный поток: Строчные элементы

Строчные элементы (`span`, `a`, `strong` и т.д.) в обычном потоке располагаются горизонтально, в строку, пока есть место. Убедитесь, что элементы `span` ведут себя именно так. Задайте одному из `span` явное статичное позиционирование.

CSS

p {
  border: 1px dashed #aaa;
  padding: 10px;
}

span {
  padding: 3px;
  margin: 2px;
}

.normal {
  background-color: #eee;
}

.highlight {
  background-color: #ffff99;
  border: 1px solid #f0e68c;
  /* Задайте статичное позиционирование */
  input1: input2;
}

                     p {
  border: 1px dashed #aaa;
  padding: 10px;
}

span {
  padding: 3px;
  margin: 2px;
}

.normal {
  background-color: #eee;
}

.highlight {
  background-color: #ffff99;
  border: 1px solid #f0e68c;
  /* Задайте статичное позиционирование */
  input1: input2;
}

HTML

<p>
  Это <span class="normal">обычный текст</span>, а это <span class="highlight">выделенный текст</span>, который является строчным элементом.
</p>

Элементы `span` по умолчанию являются строчными и имеют `position: static`. Чтобы явно указать это для элемента с классом `.highlight`, добавьте правило `position: static;` в соответствующий CSS-блок.

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

Результат

Сообщения

Выполнить

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

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

Игнорирование z-index

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

CSS

.box-1,
.box-2 {
  width: 100px;
  height: 100px;
}

.box-1 {
  background-color: rgba(255, 0, 0, 0.7); /* Красный полупрозрачный */
  margin-bottom: -50px; /* Создаем наложение */
}

.box-2 {
  background-color: rgba(0, 0, 255, 0.7); /* Синий полупрозрачный */
  z-index: 10; /* Попытка поднять наверх */
  /* Установите статичное позиционирование */
  input1
}

                     .box-1,
.box-2 {
  width: 100px;
  height: 100px;
}

.box-1 {
  background-color: rgba(255, 0, 0, 0.7); /* Красный полупрозрачный */
  margin-bottom: -50px; /* Создаем наложение */
}

.box-2 {
  background-color: rgba(0, 0, 255, 0.7); /* Синий полупрозрачный */
  z-index: 10; /* Попытка поднять наверх */
  /* Установите статичное позиционирование */
  input1
}

HTML

<div class="box-1"></div>
<div class="box-2"></div>

Чтобы свойство `z-index` перестало влиять на элемент `.box-2`, его позиционирование должно быть статичным. Добавьте правило `position: static;` для селектора `.box-2`.

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

Результат

Сообщения

Выполнить

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

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

Явное указание static

Хотя `static` является значением по умолчанию, иногда его нужно указать явно, например, для переопределения других стилей. В этом задании просто потренируйтесь явно задавать статичное позиционирование элементу.

CSS

.content-block {
  padding: 15px;
  background-color: #e6e6fa;
  border: 1px solid #d8bfd8;
  /* Задайте статичное позиционирование */
  input1: input2;
}

                     .content-block {
  padding: 15px;
  background-color: #e6e6fa;
  border: 1px solid #d8bfd8;
  /* Задайте статичное позиционирование */
  input1: input2;
}

HTML

<div class="content-block">
  <p>Это блок контента.</p>
</div>

Используйте свойство `position` и присвойте ему значение `static` в правиле для класса `.content-block`.

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

Результат

Сообщения

Выполнить

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

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

Статичные элементы внутри контейнера

Элементы с `position: static` внутри родительского элемента также следуют нормальному потоку документа внутри этого родителя. Дополните CSS, чтобы дочерние элементы имели статичное позиционирование.

CSS

.parent {
  border: 2px solid #008080;
  padding: 10px;
  background-color: #f0ffff;
}

.child {
  background-color: #b0e0e6;
  padding: 10px;
  margin-bottom: 5px;
  border: 1px dashed #4682b4;
  /* Задайте статичное позиционирование дочерним элементам */
  input1
}

                     .parent {
  border: 2px solid #008080;
  padding: 10px;
  background-color: #f0ffff;
}

.child {
  background-color: #b0e0e6;
  padding: 10px;
  margin-bottom: 5px;
  border: 1px dashed #4682b4;
  /* Задайте статичное позиционирование дочерним элементам */
  input1
}

HTML

<div class="parent">
  <div class="child">Дочерний элемент 1</div>
  <div class="child">Дочерний элемент 2</div>
</div>

Добавьте правило `position: static;` для селектора `.child`, чтобы явно указать статичное позиционирование для дочерних элементов.

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

Результат

Сообщения

Выполнить

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

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

Сброс позиционирования на static

Представьте, что для всех кнопок на сайте установлено `position: relative`, но для одной конкретной кнопки нужно отменить это поведение и вернуть ее в нормальный поток. Используйте `position: static`, чтобы сбросить позиционирование для кнопки с id `reset-button`.

CSS

button {
  padding: 10px 15px;
  margin: 5px;
  border: 1px solid #ccc;
  /* position: relative; */ /* Представим, что это правило есть где-то еще */
}

#reset-button {
  background-color: #f08080;
  color: white;
  /* Сбросьте позиционирование на статичное */
  input1: input2;
  /* Свойства ниже не должны влиять */
  top: 20px;
  left: 20px;
}

                     button {
  padding: 10px 15px;
  margin: 5px;
  border: 1px solid #ccc;
  /* position: relative; */ /* Представим, что это правило есть где-то еще */
}

#reset-button {
  background-color: #f08080;
  color: white;
  /* Сбросьте позиционирование на статичное */
  input1: input2;
  /* Свойства ниже не должны влиять */
  top: 20px;
  left: 20px;
}

HTML

<button>Обычная кнопка</button>
<button id="reset-button">Сбросить позиционирование</button>
<button>Другая кнопка</button>

Чтобы переопределить другое значение `position` (например, `relative` или `absolute`) и вернуть элемент в нормальный поток, нужно задать ему `position: static;`. Добавьте это правило для селектора `#reset-button`.

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

Результат

Сообщения

Выполнить

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

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

Статичное изображение

Изображения по умолчанию являются строчно-блочными элементами и встраиваются в поток текста. Убедитесь, что изображение остается в нормальном потоке, явно задав ему `position: static`.

CSS

p {
  line-height: 1.6;
}

img {
  border: 3px solid #4caf50;
  vertical-align: middle; /* Выравнивание по вертикали для строчных/строчно-блочных */
  margin: 0 5px;
  /* Задайте статичное позиционирование */
  input1
}

                     p {
  line-height: 1.6;
}

img {
  border: 3px solid #4caf50;
  vertical-align: middle; /* Выравнивание по вертикали для строчных/строчно-блочных */
  margin: 0 5px;
  /* Задайте статичное позиционирование */
  input1
}

HTML

<p>
  Текст до изображения 
  <img src="https://naytikurs.ru/img/1.png" alt="Логотип 1" width="50">
  текст после изображения. Изображение находится в потоке текста.
</p>

Добавьте правило `position: static;` для селектора `img`, чтобы явно указать статичное позиционирование для изображения.

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

Результат

Сообщения

Выполнить

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

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

Несколько статичных блоков

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

CSS

.block {
  padding: 15px;
  margin-bottom: 8px;
  border: 1px solid black;
  /* Задайте статичное позиционирование для всех блоков */
  input1: input2;
}

.block-1 { background-color: #f5deb3; }
.block-2 { background-color: #d2b48c; }
.block-3 { background-color: #bc8f8f; }

                     .block {
  padding: 15px;
  margin-bottom: 8px;
  border: 1px solid black;
  /* Задайте статичное позиционирование для всех блоков */
  input1: input2;
}

.block-1 { background-color: #f5deb3; }
.block-2 { background-color: #d2b48c; }
.block-3 { background-color: #bc8f8f; }

HTML

<div class="block block-1">Блок A</div>
<div class="block block-2">Блок B</div>
<div class="block block-3">Блок C</div>

Используйте групповой селектор `.block-1, .block-2, .block-3` или общий селектор `.block`, чтобы применить `position: static;` ко всем трем блокам.

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

Результат

Сообщения

Выполнить

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

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

Статичные строчно-блочные элементы

Элементы с `display: inline-block` ведут себя как строчные на внешнем уровне (располагаются в строку), но как блочные на внутреннем (уважают `width`, `height`, `padding`, `margin`). Убедитесь, что `position: static` не меняет их поведение в потоке.

CSS

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.inline-block-item {
  display: inline-block;
  width: 80px;
  height: 50px;
  background-color: #afeeee;
  border: 1px solid #40e0d0;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  /* Задайте статичное позиционирование */
  input1: input2;
}

                     .container {
  border: 1px solid #ccc;
  padding: 10px;
}

.inline-block-item {
  display: inline-block;
  width: 80px;
  height: 50px;
  background-color: #afeeee;
  border: 1px solid #40e0d0;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  /* Задайте статичное позиционирование */
  input1: input2;
}

HTML

<div class="container">
  <span class="inline-block-item">Эл. 1</span>
  <span class="inline-block-item">Эл. 2</span>
  <span class="inline-block-item">Эл. 3</span>
</div>

Добавьте правило `position: static;` для селектора `.inline-block-item`. Это значение по умолчанию, поэтому визуально ничего не изменится.

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

Результат

Сообщения

Выполнить

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

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

Игнорирование bottom и right

Как и `top` с `left`, свойства `bottom` и `right` также не влияют на элементы с `position: static`. Дополните CSS-код, установив статичное позиционирование, и убедитесь, что блок не смещается.

CSS

.box {
  width: 120px;
  height: 60px;
  background-color: #db7093;
  border: 1px solid #c71585;
  /* Свойства ниже не должны сработать */
  bottom: 25px;
  right: 35px;
  /* Укажите статичное позиционирование */
  input1
}

                     .box {
  width: 120px;
  height: 60px;
  background-color: #db7093;
  border: 1px solid #c71585;
  /* Свойства ниже не должны сработать */
  bottom: 25px;
  right: 35px;
  /* Укажите статичное позиционирование */
  input1
}

HTML

<p>Текст перед блоком.</p>
<div class="box">Блок</div>
<p>Текст после блока.</p>

Чтобы свойства `bottom` и `right` не применялись к элементу `.box`, установите для него `position: static;`.

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

Результат

Сообщения

Выполнить

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

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