Относительное позиционирование (position: relative): Тренажер CSS

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

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

Список тем

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

Сделайте так, чтобы к элементу с классом '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`.

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

Результат

Сообщения

Выполнить

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

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

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

Элемент '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`.

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

Результат

Сообщения

Выполнить

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

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

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

Теперь сместите элемент '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`.

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

Результат

Сообщения

Выполнить

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

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

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

Сместите элемент '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` с отрицательным значением чаще используется для смещения вверх.

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

Результат

Сообщения

Выполнить

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

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

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

Сместите элемент '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` с положительным значением.

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

Результат

Сообщения

Выполнить

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

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

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

Сместите элемент '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` для горизонтального. Оба значения должны быть положительными для смещения вниз и вправо.

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

Результат

Сообщения

Выполнить

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

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

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

Задайте элементу '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

Сместите элемент '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;`.

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

Результат

Сообщения

Выполнить

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

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

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

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

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;` (для смещения вправо).

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

Результат

Сообщения

Выполнить

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

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

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

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

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` с отрицательным) для смещения влево.

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

Результат

Сообщения

Выполнить

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

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

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

Элемент '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;`.

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

Результат

Сообщения

Выполнить

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

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

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

Сместите '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;`.

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

Результат

Сообщения

Выполнить

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

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