Відносне позиціонування дозволяє розміщувати елемент візуально відносно його початкового положення. При цьому сусідні елементи не займають місце цього елемента.

position: relative;

Можна використовувати властивості top, left, bottom і right для вказівки візуального зміщення елемента відносно його початкової позиції. Значення можуть бути як додатними, так і від’ємними, у різних одиницях виміру (px, % тощо). Розглянемо наступний приклад, щоб побачити, який ефект можна отримати:

Примітка

Важливо зазначити, що немає необхідності вказувати всі властивості top, bottom, left та right для елемента зі значенням position, відмінним від static. Достатньо встановити одну властивість для вертикального позиціонування (top або bottom) і одну для горизонтального позиціонування (left або right).