Sections

Coordinates

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.

.top-0.left-0

.top-0.right-0

.bottom-0.left-0

.bottom-0.right-0

<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.

Variants

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

Responsive

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.

Hover-state

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

$hover-variants: (
  // ...
  "coordinates",
);