Summary  
This chapter explains how the CSS position property and directional offsets (top, right, bottom, left) work together—using values static, relative, absolute, fixed, and sticky—to place elements inside or outside the normal document flow.  

General domain of usage  
Front-end web development for UI layout and overlays.

In modern web development, we often need to place elements outside the normal flow, for example, showing text over a product card, opening a pop-up or modal, or displaying a mobile menu. All of this is handled using the `position` property.
```css
position: static | relative | absolute | fixed | sticky
```

The `position` property changes how an element is placed on the page. By default, every element is `position: static`. Once you switch to another value, you can also use `top`, `left`, `right`, and `bottom` to control its exact location.
## Default Document Flow
By default, elements appear on the page in the same order as in the HTML. This natural flow should be kept unless positioning is required for specific UI behaviors like popups, modals, dropdowns, or mobile menus.

Підвищуйте свої навички стилізації, опановуючи сучасні техніки CSS для вебдизайну. Розміщуйте та керуйте елементами з точністю за допомогою розширених стратегій позиціонування. Створюйте плавні переходи та захоплюючі анімації для покращення взаємодії з користувачем. Трансформуйте та змінюйте елементи для динамічних візуальних ефектів. Створюйте адаптивні дизайни для різних пристроїв і оптимізуйте робочий процес за допомогою CSS-препроцесорів, таких як Sass.

Дослідження очікувань слухачів від цього курсу з розширеного стилювання HTML та CSS. Необхідні попередні знання перед початком курсу. Теми, які будуть розглянуті у курсі.

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

Дослідження можливостей переходів та вивчення способів покращення взаємодії з користувачем. Ознайомлення з методами плавної та поступової анімації властивостей для забезпечення непомітних змін стану.

Дізнайтеся про властивість animation та її використання для створення динамічних і привабливих дизайнів. Ознайомтеся зі створенням складних анімацій за допомогою keyframes і керуванням анімацією.

Дослідження властивості transform, яка дозволяє змінювати вигляд і розташування елементів на вебсторінці. Вивчення масштабування, обертання, перекошування та переміщення елементів у двох- і тривимірному просторі. Комбінування кількох трансформацій для створення складніших ефектів.

Принципи та методи, що використовуються в адаптивному та респонсивному дизайні, спрямовані на забезпечення доступності та візуальної привабливості вебсайтів і застосунків на різних пристроях, розмірах екранів і орієнтаціях.

Дізнайтеся про препроцесори в CSS та їхню роль у написанні більш ефективного й підтримуваного коду. Ознайомтеся з використанням препроцесорів для спрощення робочого процесу та створення чистішого CSS-коду.

Understanding CSS Positioning

Default Document Flow