Utilities for controlling the placement of absolutely positioned elements.

Class Properties
.top-0 top: 0;
.right-0 right: 0;
.bottom-0 bottom: 0;
.left-0 left: 0;
.top-auto top: auto;
.right-auto right: auto;
.bottom-auto bottom: auto;
.left-auto left: auto;

Use the .{top|right|bottom|left}-0 utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent.

<div class="top-0 left-0"></div>
<div class="top-0 right-0"></div>
<div class="bottom-0 left-0"></div>
<div class="bottom-0 right-0"></div>

Additional tweaks can be performed using margin and padding utilities.


By default, only responsive variants are generated for coordinate utilities.


To control the position of an element at a specific breakpoint, add a {screen}: prefix to any existing coordinate utility.

For example, use .md:top-0 to apply the top-0 utility at only medium screen sizes and above.


To include hover-state variants like .hover:top-0, add "coordinates" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know