Foundation
Position
Change the positioning of text or elements. Position classes include responsive prefixes.
.vads-u-position--absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout
.vads-u-position--relative
The element is positioned according to the normal flow of the document, and then offset relative to itself
.vads-u-position--fixed
The element is removed from the normal document flow, no space is created for the element in the page layout, and is positioned relative to its initial containing block
Responsive prefixes
Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.
<div class="vads-l-row"></div>
<div class="vads-l-col--6 vads-u-padding--2">
<h4>Elements positioned</h4>
<div class="vads-u-position--absolute mobile:vads-u-position--relative">
Positioning on <strong>mobile</strong> breakpoint and larger
</div>
<div class="vads-u-position--fixed medium-screen:vads-u-position--relative">
Positioning on <strong>medium-screen</strong> breakpoint and larger
</div>
<div class="vads-u-position--relative desktop:vads-u-position--fixed">
Positioning on <strong>desktop</strong> breakpoint and larger
</div>
</div>
</div>
Example
<div class="vads-u-position--relative mobile:vads-u-position--absolute"></div>
VADS Breakpoint Sass Variable | USWDS Breakpoint Custom Property | Width |
---|---|---|
$xsmall-screen |
--mobile |
320px |
$small-screen |
--mobile-lg |
481px |
-- | --tablet |
640px |
$medium-screen |
--medium-screen |
768px |
$small-desktop-screen |
--desktop |
1024px |
$large-screen |
--desktop-lg |
1201px |
Read more about breakpoints.