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