Абсолютное позиционирование (position: absolute)

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Вставьте свойство и значение для абсолютного позиционирования */
  input1: input2;
}

.box {
  width: 60px;
  height: 60px;
  background-color: blue;
  position: absolute;
  /* Задайте смещение сверху */
  input1: 20px;
  /* Задайте смещение слева */
  input2: 30px;
}

.box {
  width: 40px;
  height: 40px;
  background-color: green;
  position: absolute;
  /* Задайте смещение снизу */
  input1: 10px;
  /* Задайте смещение справа */
  input2: 15px;
}

.parent {
  width: 200px;
  height: 150px;
  background-color: lightgrey;
  margin: 20px;
  border: 1px solid #ccc;
  /* Задайте позиционирование родителю */
  input1: input2;
}

.child {
  width: 30px;
  height: 30px;
  background-color: orange;
  /* Позиционирование дочернего элемента будет в следующем задании */
}

.parent {
  width: 200px;
  height: 150px;
  background-color: lightgrey;
  margin: 20px;
  border: 1px solid #ccc;
  position: relative; /* Родитель уже позиционирован */
}

.child {
  width: 30px;
  height: 30px;
  background-color: orange;
  /* 1. Задайте абсолютное позиционирование */
  input1: input2;
  /* 2. Задайте смещение сверху */
  input3: 5px;
  /* 3. Задайте смещение справа */
  input4: 5px;
}

.box {
  width: 70px;
  height: 70px;
  position: absolute;
}

.red {
  background-color: red;
  top: 20px;
  left: 20px;
  /* z-index по умолчанию auto (или 0) */
}

.blue {
  background-color: blue;
  top: 40px;
  left: 40px;
  /* Задайте z-index больше, чем у красного блока */
  input1: 1;
}

p {
  position: relative; /* Создаем контекст наложения для параграфа */
  z-index: 0; /* Чтобы быть уверенным, что он выше отрицательного z-index */
  background: rgba(255,255,255,0.7); /* Небольшой фон для наглядности */
  padding: 5px;
}

.red {
  width: 100px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 10px;
  left: 10px;
  /* Задайте отрицательный z-index */
  input1: -1;
}

.container {
  width: 180px;
  height: 120px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 20px;
  /* 1. Сделайте контейнер позиционированным */
  input1: relative;
}

.icon {
  width: 24px; /* Размер иконки не меняем */
  height: 24px;
  /* 2. Сделайте иконку абсолютно позиционированной */
  input2: absolute;
  /* 3. Задайте смещение снизу */
  input3: 8px;
  /* 4. Задайте смещение слева */
  input4: 8px;
}

.container {
  width: 250px;
  height: 150px;
  background-color: lightyellow;
  border: 1px solid #ccc;
  margin: 20px;
  /* 1. Родитель должен быть позиционирован */
  input1: relative;
}

.side {
  width: 40px; /* Ширина задана */
  background-color: lightblue;
  /* 2. Абсолютное позиционирование */
  input2: absolute;
  /* 3. Привязка к верхнему краю */
  input3: 0;
  /* 4. Привязка к нижнему краю */
  input4: 0;
  /* 5. Привязка к левому краю */
  input5: 0;
}

.container {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin: 20px;
  /* 1. Родитель должен быть позиционирован */
  input1: relative;
}

.header {
  height: 30px; /* Высота задана */
  background-color: orange;
  /* 2. Абсолютное позиционирование */
  input2: absolute;
  /* 3. Привязка к верхнему краю */
  input3: 0;
  /* 4. Привязка к левому краю */
  input4: 0;
  /* 5. Привязка к правому краю */
  input5: 0;
}

.container {
  width: 250px;
  height: 100px;
  background-color: lightgreen;
  border: 1px solid #ccc;
  margin: 20px;
  position: relative; /* Родитель позиционирован */
}

.centered {
  width: 80px;
  height: 40px;
  background-color: purple;
  color: white;
  text-align: center;
  line-height: 40px;
  /* 1. Абсолютное позиционирование */
  input1: absolute;
  /* 2. Смещение левого края на 50% ширины родителя */
  input2: 50%;
  /* 3. Отрицательный отступ влево на половину ширины элемента */
  input3: -40px;
  /* Для наглядности можно добавить top */
  top: 20px;
}

.tooltip-container {
  display: inline-block; /* Чтобы контейнер был по размеру текста */
  border-bottom: 1px dotted black;
  cursor: help;
  margin: 50px;
  /* 1. Позиционируем контейнер */
  input1: relative;
}

.tooltip-text {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* 2. Абсолютное позиционирование */
  input2: absolute;
  z-index: 1;
  /* 3. Позиция над текстом (можно добавить небольшой отступ) */
  input3: 125%; /* 100% + отступ */
  /* 4. Горизонтальное центрирование */
  left: 50%;
  margin-left: -60px; /* Половина ширины (120px / 2) */

  /* Скрытие по умолчанию */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Показ при наведении */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}