Position
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Examples#
Fixed#
.slds-is-fixed can be used to position a container relative to the viewport.
top, right, bottom, left) it will start its positioning relative to where it is in the flow of the page.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="demo-only slds-grid" style="height:10rem;width:20rem;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>Absolute#
.slds-is-absolute can be used to position a container relative to its closest ancestor with relative positioning.
top, right, bottom, left) it will start its positioning relative to where it is in the flow of the page.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="demo-only slds-grid" style="height:10rem;width:20rem;padding:2rem">
<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>Relative#
.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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="demo-only slds-grid" style="height:10rem;width:20rem;padding:2rem">
<div class="slds-is-relative">
<div style="position:absolute;top:1rem;left:1rem;border:1px solid red;background:#f4f6f9">Like static, a relatively positioned element is put where its normal position would be in the document layout flow.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>Static#
.slds-is-static resets positioning of element back to normal behavior.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="demo-only slds-grid" style="height:10rem;width:20rem;padding:2rem">
<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>Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-is-static |
|---|---|
| Summary | Reset positioning back to normal behavior |
| Restrict | * |
| Modifier | True |
| 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 | * |
| Modifier | True |
| Selector | .slds-is-fixed |
|---|---|
| Summary | Used to position an element relative to the viewport. |
| Restrict | * |
| Modifier | True |
| Selector | .slds-is-absolute |
|---|---|
| Summary | Used to position an element relative to its closest ancestor with relative positioning. |
| Restrict | * |
| Modifier | True |
| Selector | .slds-is-nested |
|---|---|
| Summary | Provides styles for a nested lists |
| Restrict | * |
| Modifier | True |
| Selector | .slds-is-collapsed |
|---|---|
| Summary | Hides elements inside a parent |
| Restrict | * |
| Modifier | True |
| Selector | .slds-is-expanded |
|---|---|
| Summary | Shows the elements inside the parent |
| Restrict | * |
| Modifier | True |
| Selector | .slds-is-visually-empty |
|---|---|
| Summary | Hides element and removes width |
| Restrict | * |
| Modifier | True |