| 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.
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",
);