Components › Utilities

Position

Positioning utilities give you the ability to change the position property of an element.

RelativeRelativedev ready

Preview

Code

<div class="slds-is-relative">
  <div style="position:absolute;top:1rem;left:1rem;border:1px solid red;background:#f4f6f9;">An absolutely positioned element is positioned relative to the nearest positioned parent. The
    <code>.slds-is-relative</code> class can be used to give the parent or ancestor positioning.</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.slds-is-relative can be used to contain children if children are absolutely positioned and out of flow. It is also used to position element without changing layout.

FixedFixeddev ready

Preview

Code

<div class="slds-is-fixed">
  <div style="position:absolute;top:1rem;left:1rem;border:1px solid red;background:#f4f6f9;">An element with fixed positioning is positioned relative to the viewport. If no other positioning values are given (
    <code>top, right, bottom, left</code>) it will start its positioning relative to where it is in the flow of the page.</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.slds-is-fixed can be used to position a container relative to the viewport.

AbsoluteAbsolutedev ready

Preview

Code

<div class="slds-is-absolute">
  <div style="position:absolute;top:1rem;left:1rem;border:1px solid red;background:#f4f6f9;">An element with absolute positioning is positioned relative to its closest ancestor with relative positioning. If no other positioning values are given (
    <code>top, right, bottom, left</code>) it will start its positioning relative to where it is in the flow of the page.</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.slds-is-absolute can be used to position a container relative to its closest ancestor with relative positioning.

StaticStaticdev ready

Preview

Code

<div class="slds-is-static">
  <div style="position:absolute;top:1rem;left:1rem;border:1px solid red;background:#f4f6f9;">A static positioned element is positioned exactly as it comes in the flow of the page.</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.slds-is-static resets positioning of element back to normal behavior

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-is-relative
Applied to:

any element

Outcome:

Used to contain children if children are absolutely positioned and out of flow. Also used to position element without changing layout.

Required:

No, optional element or modifier

Comments:

--

.slds-is-fixed
Applied to:

any element

Outcome:

Used to position an element relative to the viewport.

Required:

No, optional element or modifier

Comments:

--

.slds-is-absolute
Applied to:

any element

Outcome:

Used to position an element relative to its closest ancestor with relative positioning.

Required:

No, optional element or modifier

Comments:

--

.slds-is-static
Applied to:

any element

Outcome:

Reset positioning back to normal behavior

Required:

No, optional element or modifier

Comments:

--