💡 Understanding CSS Positioning
When designing for the web, understanding how to position elements is crucial. Amped utilizes three positioning methods: relative, absolute, and fixed positioning. Let's dive into each one and understand their differences and use cases.
1. Relative Positioning
Relative positioning allows you to position an element relative to its normal position in the layout flow.
How It Works 👉
If you drag a new element into your canvas, it will default to being relative.
Relatively positioned elements follow the order flow (horizontal or vertical) and the alignment layout of it’s parent container.
Affected by other relative elements within it’s parent container.
Example
In this example, the blue square container is relatively positioned to the center of it’s parent container— it’s alignment defaults to the layout settings of the parent container.
Use Cases:
Creating text hierarchy or buttons in a group (especially when wrapping elements!)
Overall popup flow
Creating a split screen design layout (using shrink/grow) for responsive display
2. Absolute Positioning
Absolute positioning allows you to position an element relative to its nearest positioned parent container. If no such container exists, it will be positioned based off the device screen size.
How It Works 👉
When you apply absolute positioning to an element, it is removed from the normal document flow/ stacking order.
You can use the x and y offset properties to position the element precisely.
Other elements will ignore the absolutely positioned element, meaning it won't take up any space in the document flow.
Example
In this example, the selected absolute element becomes positioned 10 pixels from the top and right edges of it’s parent container.
Use Cases:
Creating complex layouts where elements need to be precisely positioned.
Overlaying elements on top of each other, such as creating a modal or tooltip.
3. Fixed Positioning
Fixed positioning allows you to position an element relative to the viewport, which means it will stay in the same place even when the page is scrolled.
How It Works 👉
When you apply fixed positioning to an element, it is removed from the normal document flow/ stacking order.
You can use the x and y offset properties to position the element relative to the viewport.
The element will remain fixed in its position regardless of scrolling.
Example
In this example, the selected fixed element becomes positioned 10 pixels from the top and right edges of the viewport, ignoring it’s parent container’s restraints.
Use Cases:
Creating sticky headers, footers, or sidebars that remain visible during scrolling.
Placing important notifications or buttons that need to stay in view.