Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Foundation

Position

Change the positioning of text or elements. Position classes include responsive prefixes.

Position

CSS property: position

.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.

Edit this page in GitHub (Permissions required)
Last updated: Sep 11, 2024