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!
<!-- I'm the overlay background -->
<div class="u-posFullScreen  u-bgGrayDarker  u-opacity60"></div>