Position Utilities
Utility classes for positioning.
| Class Name | Responsive Classes | Description |
|---|---|---|
u-posAbsolute |
none | Absolutely position an element. |
u-posAbsoluteCenter |
none | Absolutely position and center an element. |
u-posFit |
none | Fit an element to the dimensions of its parent. |
u-posFullScreen |
none | Fixes an element over the viewport. |
u-posFixed |
none | Fixed position an element. |
u-posFixedCenter |
none | Fix an element in the center of the viewport. |
u-posRelative |
none | Relatively position an element. |
u-posStatic |
none | Static position an element. |
Usage example:
The following is a quick way to create a “modal”.
<div role="dialog" class="u-posFixedCenter">
I'll be at the center of the screen!
</div>
<!-- I'm the overlay background -->
<div class="u-posFullScreen u-bgGrayDarker u-opacity60"></div>