Examples #
<div class="d-ps-relative d-w100p"> <code class="d-bgc-transparent">Relative Parent</code> <div class="d-ps-static d-bgc-moderate-opaque d-p-200 d-h-700 d-bar-400"> <code class="d-bgc-transparent">Static Parent</code> <dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-ibs-0 d-iie-150 d-size-200 d-p-100 d-bar-400 d-bgc-moderate-opaque d-code--sm">.d-ps-absolute<br>.d-ibs-0<br>.d-iie-150</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-ibe-0 d-iie-n150 d-size-200 d-p-100 d-bar-400 d-bgc-moderate-opaque d-code--sm">.d-ps-absolute<br>.d-ibe-0<br>.d-iie-n150</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-ps-sticky d-ibs-0 d-size-200 d-p-100 d-bar-400 d-bgc-moderate-opaque d-code--sm">.d-ps-sticky<br>.d-ibs-0</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-ps-relative d-ibs-400 d-iis-800 d-size-200 d-p-100 d-bar-400 d-bgc-moderate-opaque d-code--sm">.d-ps-relative<br>.d-ibs-400<br>.d-iis-800</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-ps-fixed d-t50p d-l50p d-size-200 d-p-100 d-bar-400 d-bgc-moderate-opaque d-code--sm">.d-ps-fixed<br>.d-t50p<br>.d-l50p</dt-stack> </div> </div>
Classes #
Set an element’s position by using the position classes listed in the table below. Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity.
Class
|
Output
|
|---|---|
| .d-ps-static | position: static !important; |
| .d-ps-relative | position: relative !important; |
| .d-ps-absolute | position: absolute !important; |
| .d-ps-fixed | position: fixed !important; |
| .d-ps-sticky | position: sticky !important; |
| .d-ps-unset | position: unset !important; |