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

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

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

Список тем

Применение position: relative

id: 37316_relative-pos-1

Сделайте так, чтобы к элементу с классом 'box1' применилось относительное позиционирование. Визуально элемент пока не сдвинется, но это подготовит его к дальнейшим смещениям.

CSS

.container {
  padding: 10px;
  border: 1px solid #ccc;
  height: 200px; /* Добавлено для наглядности */
}

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  /* Задайте относительное позиционирование */
  input1: input2;
}

.box2 {
  background-color: lightcoral;
}

                     .container {
  padding: 10px;
  border: 1px solid #ccc;
  height: 200px; /* Добавлено для наглядности */
}

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  /* Задайте относительное позиционирование */
  input1: input2;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Чтобы задать относительное позиционирование, используйте свойство `position` со значением `relative` для селектора `.box1`.

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

Результат

Сообщения

Выполнить

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

Смещение элемента вниз

id: 37316_relative-pos-2

Элемент 'box1' уже имеет относительное позиционирование. Теперь сместите его на 20 пикселей вниз от его исходной позиции.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Сместите элемент вниз на 20px */
  input1: 20px;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Сместите элемент вниз на 20px */
  input1: 20px;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Для смещения элемента вниз относительно его нормального положения используйте свойство `top` с положительным значением. Добавьте это свойство к селектору `.box1`.

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

Результат

Сообщения

Выполнить

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

Смещение элемента вправо

id: 37316_relative-pos-3

Теперь сместите элемент 'box1' на 30 пикселей вправо от его исходной позиции. Обратите внимание, что свойство `position: relative` уже применено.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Сместите элемент вправо на 30px */
  input1: 30px;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Сместите элемент вправо на 30px */
  input1: 30px;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Чтобы сместить элемент вправо относительно его нормального положения, используйте свойство `left` с положительным значением. Добавьте его к селектору `.box1`.

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

Результат

Сообщения

Выполнить

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

Смещение элемента вверх

id: 37316_relative-pos-4

Сместите элемент 'box1' на 15 пикселей вверх от его исходной позиции. Помните, что для этого нужно использовать свойство смещения с отрицательным значением.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: input1;
  /* Сместите элемент вверх на 15px */
  input2: -15px;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: input1;
  /* Сместите элемент вверх на 15px */
  input2: -15px;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Для смещения элемента вверх используйте свойство `top` с отрицательным значением (например, `-15px`). Также можно использовать свойство `bottom` с положительным значением, но `top` с отрицательным значением чаще используется для смещения вверх.

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

Результат

Сообщения

Выполнить

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

Смещение элемента влево

id: 37316_relative-pos-5

Сместите элемент 'box1' на 25 пикселей влево от его исходной позиции. Используйте соответствующее свойство смещения с отрицательным значением.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  input1: relative;
  /* Сместите элемент влево на 25px */
  input2: -25px;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  input1: relative;
  /* Сместите элемент влево на 25px */
  input2: -25px;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Для смещения элемента влево используйте свойство `left` с отрицательным значением (например, `-25px`). Альтернативно, можно использовать `right` с положительным значением.

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

Результат

Сообщения

Выполнить

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

Диагональное смещение

id: 37316_relative-pos-6

Сместите элемент 'box1' одновременно на 10 пикселей вниз и на 15 пикселей вправо от его исходной позиции.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Сместите вниз на 10px */
  input1: 10px;
  /* Сместите вправо на 15px */
  input2: 15px;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Сместите вниз на 10px */
  input1: 10px;
  /* Сместите вправо на 15px */
  input2: 15px;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Для диагонального смещения используйте два свойства смещения одновременно: `top` для вертикального смещения и `left` для горизонтального. Оба значения должны быть положительными для смещения вниз и вправо.

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

Результат

Сообщения

Выполнить

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

Относительное позиционирование и поток документа

id: 37316_relative-pos-7

Задайте элементу 'box1' относительное позиционирование и сместите его на 40 пикселей вправо. Обратите внимание, что элемент 'box2' не меняет своего положения, так как 'box1' все еще занимает свое исходное место в потоке.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  /* Задайте позиционирование */
  input1: input2;
  /* Сместите вправо */
  input3: 40px;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  /* Задайте позиционирование */
  input1: input2;
  /* Сместите вправо */
  input3: 40px;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Примените к `.box1` свойство `position` со значением `relative` и свойство `left` со значением `40px`. Это покажет, что относительное смещение не влияет на расположение других элементов.

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

Результат

Сообщения

Выполнить

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

Смещение с помощью bottom и right

id: 37316_relative-pos-8

Сместите элемент 'box1' на 10 пикселей вверх и 20 пикселей влево, используя свойства `bottom` и `right`.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Сместите вверх на 10px */
  input1: 10px;
  /* Сместите влево на 20px */
  input2: 20px;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Сместите вверх на 10px */
  input1: 10px;
  /* Сместите влево на 20px */
  input2: 20px;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Свойство `bottom` с положительным значением смещает элемент вверх (противоположно `top`). Свойство `right` с положительным значением смещает элемент влево (противоположно `left`). Используйте `bottom: 10px;` и `right: 20px;`.

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

Результат

Сообщения

Выполнить

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

Относительное позиционирование строчного элемента

id: 37316_relative-pos-9

Сместите слово 'среднее' внутри параграфа немного вверх и вправо, применив к нему относительное позиционирование.

CSS

p {
  font-size: 18px;
  line-height: 1.5;
  border: 1px dashed gray;
  padding: 10px;
  width: 300px;
}

.offset-word {
  background-color: yellow;
  /* Задайте позиционирование */
  input1: input2;
  /* Сместите вверх */
  input3: 3px;
  /* Сместите вправо */
  input4: 5px;
}

                     p {
  font-size: 18px;
  line-height: 1.5;
  border: 1px dashed gray;
  padding: 10px;
  width: 300px;
}

.offset-word {
  background-color: yellow;
  /* Задайте позиционирование */
  input1: input2;
  /* Сместите вверх */
  input3: 3px;
  /* Сместите вправо */
  input4: 5px;
}

HTML

<p>
  Это простое предложение, где 
  <span class="offset-word">среднее</span> 
  слово будет немного смещено.
</p>

Оберните слово 'среднее' в тег `<span>` с классом, например, 'offset-word'. Затем примените к этому классу `position: relative`, `bottom: 3px;` (для смещения вверх) и `left: 5px;` (для смещения вправо).

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

Результат

Сообщения

Выполнить

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

Смещение изображения

id: 37316_relative-pos-10

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

CSS

.image-container {
  border: 1px solid black;
  padding: 15px;
  width: 100px;
  height: 100px;
}

img.icon {
  width: 50px;
  height: 50px;
  /* Задайте позиционирование */
  input1: input2;
  /* Сместите вниз на 5px */
  input3: 5px;
  /* Сместите влево на 8px */
  input4: 8px;
}

                     .image-container {
  border: 1px solid black;
  padding: 15px;
  width: 100px;
  height: 100px;
}

img.icon {
  width: 50px;
  height: 50px;
  /* Задайте позиционирование */
  input1: input2;
  /* Сместите вниз на 5px */
  input3: 5px;
  /* Сместите влево на 8px */
  input4: 8px;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/7.png" alt="Icon" class="icon">
</div>

Примените к изображению (`img.icon`) свойство `position: relative`. Затем используйте `top` с положительным значением для смещения вниз и `right` с положительным значением (или `left` с отрицательным) для смещения влево.

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

Результат

Сообщения

Выполнить

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

Возврат в исходное положение

id: 37316_relative-pos-11

Элемент 'box1' смещен с помощью `top` и `left`. Измените CSS так, чтобы он вернулся в свое нормальное положение, не удаляя свойство `position: relative`.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Установите смещение по вертикали в 0 */
  input1: 0;
  /* Установите смещение по горизонтали в 0 */
  input2: 0;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.box1 {
  background-color: lightblue;
  position: relative;
  /* Установите смещение по вертикали в 0 */
  input1: 0;
  /* Установите смещение по горизонтали в 0 */
  input2: 0;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Чтобы отменить смещение, заданное свойствами `top`, `left`, `bottom`, `right`, можно установить их значения в `0` или `auto`. В данном случае, установите `top: 0;` и `left: 0;`.

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

Результат

Сообщения

Выполнить

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

Небольшое перекрытие элементов

id: 37316_relative-pos-12

Сместите 'box1' так, чтобы он слегка перекрывал 'box2'. Используйте отрицательное значение для смещения вверх.

CSS

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px; /* Отступ между блоками */
}

.box1 {
  background-color: lightblue;
  /* Задайте позиционирование */
  input1: input2;
  /* Сместите вверх, чтобы перекрыть box2 */
  input3: -5px;
}

.box2 {
  background-color: lightcoral;
}

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

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 10px; /* Отступ между блоками */
}

.box1 {
  background-color: lightblue;
  /* Задайте позиционирование */
  input1: input2;
  /* Сместите вверх, чтобы перекрыть box2 */
  input3: -5px;
}

.box2 {
  background-color: lightcoral;
}

HTML

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

Примените к `.box1` `position: relative`. Чтобы он перекрыл начало `.box2`, сместите его вниз на величину, меньшую его нижнего отступа (`margin-bottom`), или сместите его вверх с помощью `top` с отрицательным значением, например `top: -5px;`.

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

Результат

Сообщения

Выполнить

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