Position

Position

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

Position: Fixed

Preview

No content has been added for this component.

No content has been added for this component.

<div class="demo-only slds-grid" style="height:150px;width:300px;padding:2rem;">
  <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>
</div>

Fixed

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


Overview of CSS Classes

Selector.slds-is-static
Summary

Reset positioning back to normal behavior

Restrict*
ModifierTrue
Selector.slds-is-relative
Summary

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

Restrict*
ModifierTrue
Selector.slds-is-fixed
Summary

Used to position an element relative to the viewport.

Restrict*
ModifierTrue
Selector.slds-is-absolute
Summary

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

Restrict*
ModifierTrue
Selector.slds-is-nested
Summary

Provides styles for a nested lists

Restrict*
ModifierTrue
Selector.slds-is-collapsed
Summary

Hides elements inside a parent

Restrict*
ModifierTrue