position

<div layout="absolute top:20px right:10%">...</div>

There isn’t a single position utility — instead, there’s one utility for each possible position value: absolute, relative, fixed, and sticky.

You can assign it any non-static position (absolute, fixed, sticky, or relative) and define its placement using top, bottom, left, or right.

When to use ?

Use this when you need to position an element with a non-static position, such as absolute, fixed, sticky, or relative.

absolute

To use absolute positioning, add the absolute utility to the desired element.

This makes the element’s position (e.g., left: 10px) relative to that ancestor.

relative

When you use relative positioning, the left, right, top, and bottom values adjust the element’s position relative to its original place in the flow.

The element stays in the flow, but its “normal” position shifts by the specified amount.

As you can see when you use relative, the element has the same width than it’s parent. It’s not always what we want.

If you want to change this you can use the w utility to give it a width, you can use any width valid value :

And voilà !

sticky

When you use sticky, the element is positioned relative to its nearest scrolling ancestor.

It behaves like a normal element until you scroll past a certain point, at which it “sticks” to that position on the screen with the offset you specified (e.g., top, left, etc.) and stays visible as you continue to scroll.

However, it will stop sticking once you reach the end of its parent element.

As you can see when you use sticky, the element has the same width than it’s parent. (You can tweak this by using the w utility).

Try to scroll to see the sticky behavior.

fixed

When you use fixed positioning, the element is positioned relative to the viewport (the visible part of the screen).

As you can see when you use fixed, the element has same width of it’s content.

Its position remains fixed, meaning it doesn’t move even when you scroll the page.