Относительное позиционирование: возможности и применение

Относительная позиция (relative position) веб-элемента определяет его местоположение относительно других элементов веб-страницы. Это означает, что элемент находится в определенном положении, которое зависит от его соседей или родительского элемента.

В CSS относительная позиция задается с помощью свойства position и значения relative. Это значит, что элемент с относительной позицией будет позиционироваться относительно своего нормального местоположения в потоке документа.

Вот пример кода, который демонстрирует использование относительной позиции:

  

    
Первый блок
  
  
  

    
Второй блок
  

.container {
  position: relative;
  height: 300px;
  background-color: #CCC;
}
.box1 {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2 {
  position: relative;
  top: -50px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

В данном примере у родительского элемента container задана относительная позиция. Дочерние элементы box1 и box2 также имеют относительную позицию, и им заданы значения top и left, чтобы изменить их положение относительно местоположения по умолчанию.

Как результат, box1 смещен на 50px вправо и 50px вниз от своего нормального местоположения, а box2 смещен на 50px вверх и 100px вправо от своего местоположения.

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