Position

When to use it

The Position utility is used to control the positioning of elements within their parent container or on the screen. It provides a way to precisely place elements in various positions such as top, bottom, left, right, and center.

Variants

• Top/Bottom Left/Right: Use the .u-position--[top|bottom]-[right|left] classes to position an element to the top/bottom right/left corner of its parent element.
• Left/Right: Use the .u-position--[right|left] classes to position an element to the right/left side of its parent element.
• Absolute: Use the .u-position--absolute class to position an element “absolute” on the screen.
• Relative: Use the .u-position--relative class to position an element “relative” on the screen.
• Sticky: Use the .u-position--sticky class to position an element “sticky” on the screen.
• Fixed: Use the .u-position--fixed class to position an element “fixed” on the screen.

TIP

When using .u-position--sticky, make sure to add a top or bottom value in your CSS that suits your content. Many times what you want is just a value of 0 so in those cases adding an extra .u-position--top or .u-position--bottom can help you with this (they come with a default zero).

What it looks like

Code examples

Top

<span class="u-position--top-left">top-left</span>
<span class="u-position--top-center">top-center</span>
<span class="u-position--top-right">top-right</span>

Bottom

<span class="u-position--bottom-left">bottom-left</span>
<span class="u-position--bottom-center">bottom-center</span>
<span class="u-position--bottom-right">bottom-right</span>

Left/Right

<span class="u-position--left">left</span>
<span class="u-position--right">right</span>

Other

<span class="u-position--absolute">absolute</span>
<span class="u-position--relative">relative</span>
<span class="u-position--sticky">sticky</span>
<span class="u-position--fixed">fixed</span>