Absolute positioning removes an element from the normal page flow and places it exactly where you want.
The position of an absolutely placed element depends on its nearest parent that has position set to relative, absolute, or fixed.
If no such parent exists, the element is positioned relative to the page itself.
In this example, the container uses relative positioning.
The badge uses absolute positioning, so it is placed inside the container instead of floating randomly on the page.
This technique is widely used to place icons, labels, and buttons on cards and images.
Absolute positioning is often used to place text or buttons on top of images.
This is common in banners, sliders, and hero sections of websites.
This example shows how absolute positioning is used for close buttons, icons, and floating controls inside components.
These patterns are used in modals, alerts, and notifications.
Important rules of absolute positioning
- The element is removed from normal flow
- It is positioned relative to the nearest positioned parent
- If no parent is positioned, it uses the page as reference
- It should always be used with care to avoid layout overlap
This technique is used in video thumbnails, image labels, and status indicators.
Practice task
Create a card and:
- Set the card position to relative
- Add a button inside using position absolute
- Place the button at the top right corner
Next lesson
In the next page, you will learn about fixed positioning and how to keep elements in one place while scrolling.