Чтобы легче разобраться в свойстве position в CSS, можно запомнить следующие основные понятия:

• static — значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа. 2
• relative — элемент позиционируется относительно своего исходного положения в потоке документа. 2 При использовании этого значения можно задать дополнительные параметры, такие как top, bottom, left и right, которые указывают на смещение элемента относительно его стандартного местоположения. 2
• absolute — элемент позиционируется относительно ближайшего родительского элемента, который имеет позиционирование, отличное от static. 2
• fixed — элемент позиционируется относительно окна браузера. 2
• sticky — элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции. 2

Ещё несколько советов:

• Важно указать в CSS, какой блок является родителем дочернего элемента, относительно чего должен позиционироваться этот элемент. 1 Если не указать свойство position у родителя, то он позиционирует дочерний элемент относительно всего тела body. 1
• Не нужно указывать одновременно top, bottom, right и left, их нужно использовать только для тех сторон, которые интересуют. 1
• Использование свойства position вместе с другими свойствами, например, transform или display, может дать неожиданные результаты и требует более тщательного тестирования на разных браузерах и устройствах. 2

Для более подробного изучения свойства position можно воспользоваться, например, сайтом htmlbook. 4