Статичное позиционирование (position: static) [Модуль 2: Блочная модель и позиционирование]: Тренажер CSS

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

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

Список тем

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

id: 37315_css-pos-static-01

В этом задании вы увидите стандартное поведение элемента без явно заданного позиционирования. Дополните 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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37315_css-pos-static-02

Статично позиционированные элементы не реагируют на свойства смещения `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;`.

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

Результат

Сообщения

Выполнить

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

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

id: 37315_css-pos-static-03

Блочные элементы (`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;`.

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

Результат

Сообщения

Выполнить

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

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

id: 37315_css-pos-static-04

Строчные элементы (`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

id: 37315_css-pos-static-05

Свойство `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

id: 37315_css-pos-static-06

Хотя `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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37315_css-pos-static-07

Элементы с `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

id: 37315_css-pos-static-08

Представьте, что для всех кнопок на сайте установлено `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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37315_css-pos-static-09

Изображения по умолчанию являются строчно-блочными элементами и встраиваются в поток текста. Убедитесь, что изображение остается в нормальном потоке, явно задав ему `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`, чтобы явно указать статичное позиционирование для изображения.

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

Результат

Сообщения

Выполнить

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

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

id: 37315_css-pos-static-10

Это упражнение закрепляет понимание нормального потока для блочных элементов. У вас есть три блока. Допишите 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;` ко всем трем блокам.

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

Результат

Сообщения

Выполнить

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

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

id: 37315_css-pos-static-11

Элементы с `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

id: 37315_css-pos-static-12

Как и `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;`.

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

Результат

Сообщения

Выполнить

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