Utility classes to change an element’s position type.
<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>
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; |
Position documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope