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

Най-важното за относителното позициониране

position: relative позволява да изместите елемент спрямо неговото текущо място, без да нарушавате подредбата на останалите елементи. Дори когато го преместите с top, left, right или bottom, той запазва първоначалното си място в потока на страницата. Това означава, че другите елементи се държат така, сякаш той не е мърдан. При конфликт (например едновременно left и right) браузърът игнорира едната стойност.

Стъпка по стъпка: как да изместите елемент

1. Изберете елемент (например по ID).
2. Задайте му position: relative.
3. Добавете отместване, например:
   • left: 20px;
   • top: -20px;
4. Запазете и презаредете страницата, за да видите резултата.
5. Експериментирайте с по-големи стойности, за да наблюдавате как елементът се мести, без да влияе на останалите.

Опитайте и комбинации като left и right едновременно, за да видите кое свойство ще бъде приложено.

Основни CSS свойства

• position: relative; – позволява изместване на елемента спрямо собствената му начална позиция.
• left – премества елемента хоризонтално спрямо първоначалното му място.
• right – отместване отдясно (при конфликт с left може да бъде игнорирано).
• top – премества елемента нагоре или надолу спрямо началната му позиция.
• bottom – отместване отдолу (при конфликт с top може да бъде игнорирано).