Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
Position
Place a component outside the normal document flow.
Warnings
Be sure you understand the ramifications of fixed and absolute position in your project; you may need to add aditional CSS.
The sticky utilities uses CSS's position: sticky, which isn't fully supported in all browsers. Additional support information can be found over at Can I Use.
IE11 and IE10 will render position: sticky as position: relative. As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that can render it properly.
Common Positioning
Responsive variants of common positioning types can be used in the form of .position{breakpoint}-(type}. Please refer to how our breakpoint nomenclature is used.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>Quick Positioning
There are also some quick positioning utilities available, but they are not responsive.
Fixed Top
Position an element at the top of the viewport, from edge to edge.
<div class="fixed-top">...</div>Fixed Bottom
Position an element at the bottom of the viewport, from edge to edge.
<div class="fixed-bottom">...</div>Sticky Top
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it.
<div class="sticky-top">...</div>