Относително позициониране на елементи в CSS

Относителното позициониране се задава с помощта на стойността relative за свойството position. Такова позициониране позволява елементите да се изместват спрямо текущото си положение с дадена стойност. При това всички останали елементи на страницата ще смятат, че елементът се намира там, където е бил първоначално. Тоест при този тип позициониране елементът не изпада от нормалния поток.

Отместванията от текущата позиция се задават със свойствата top, right, bottom и left.

Пример

За начало нека просто направим два блока без позициониране:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Пример

Нека сега добавим relative към първия блок. Това все още няма да промени нищо, тъй като не сме указали отместване на блока:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Пример

Нека сега преместим нашия блок с 30px отгоре, като му зададем свойство top. При това всички останали елементи ще се държат така, сякаш нашият блок е останал на мястото, където е бил първоначално:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Пример

Нека също преместим нашия блок с 40px отляво, като му зададем свойство left:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Пример

Отрицателните стойности на свойствата top, right, bottom и left преместват в обратна посока. Например, положителна стойност top премества надолу, а отрицателна - нагоре.

Нека преместим нашия втори блок с 40px нагоре, като му зададем отрицателна стойност на свойството top:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Практически задачи

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}