The position property controls how an element is placed on the page.
Using position, you can move elements from their normal place and build layouts like headers, sidebars, and floating buttons.
This example uses position relative.
The element moves from its original place without breaking the page layout.
Absolute positioning removes the element from the normal flow and places it relative to its nearest positioned parent.
This technique is used to place labels, badges, and icons on cards and banners.
Fixed elements stay in the same position even when the page is scrolled.
This is commonly used for chat buttons, help icons, and sticky headers.
Practice task
Create a box and:
- Move it using position relative
- Place another box using position absolute
- Add a fixed button at the bottom right of the page
Next lesson
In the next page, you will learn about relative positioning in detail.