Positioning

Use these utility classes to quickly change an element’s position in the DOM.

Position

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-p-static position: static !important;
.d-p-relative position: relative !important;
.d-p-absolute position: absolute !important;
.d-p-fixed position: fixed !important;
.d-p-sticky position: sticky !important;
.d-p-unset position: unset !important;
Relative parent
Static parent
.d-p-absolute
.d-t0
.d-r12
.d-p-absolute
.d-b0
.d-rn12
.d-p-sticky
.d-t0
.d-p-relative
.d-t32
.d-l64
<div class="d-p-static"></div>
<div class="d-p-relative"></div>
<div class="d-p-absolute"></div>
<div class="d-p-fixed"></div>
<div class="d-p-sticky"></div>

Coordinates

Dialtone's spacing units can be combined with the position utilities above to position elements. Set an element’s position by using the .d-p-{type} classes. The table below lists the available classes and their CSS output. Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity. All previous class names still exist, but are considered deprecated and should not be used moving forward. They will be removed in a future version.

Positive Classes

Value Top Right Bottom Left L/R T/B All
0px .d-t0 .d-r0 .d-b0 .d-l0 .d-x0 .d-y0 .d-all0
1px .d-t1 .d-r1 .d-b1 .d-l1 .d-x1 .d-y1 .d-all1
2px .d-t2 .d-r2 .d-b2 .d-l2 .d-x2 .d-y2 .d-all2
4px .d-t4 .d-r4 .d-b4 .d-l4 .d-x4 .d-y4 .d-all4
6px .d-t6 .d-r6 .d-b6 .d-l6 .d-x6 .d-y6 .d-all6
8px .d-t8 .d-r8 .d-b8 .d-l8 .d-x8 .d-y8 .d-all8
12px .d-t12 .d-r12 .d-b12 .d-l12 .d-x12 .d-y12 .d-all12
16px .d-t16 .d-r16 .d-b16 .d-l16 .d-x16 .d-y16 .d-all16
24px .d-t24 .d-r24 .d-b24 .d-l24 .d-x24 .d-y24 .d-all24
32px .d-t32 .d-r32 .d-b32 .d-l32 .d-x32 .d-y32 .d-all32
48px .d-t48 .d-r48 .d-b48 .d-l48 .d-x48 .d-y48 .d-all48
64px .d-t64 .d-r64 .d-b64 .d-l64 .d-x64 .d-y64 .d-all64
50% .d-t50 .d-r50 .d-b50 .d-l50 N/A N/A N/A
100% .d-t100 .d-r100 .d-b100 .d-l100 N/A N/A N/A
100-calc .d-t100-calc .d-r100-calc .d-b100-calc .d-l100-calc N/A N/A N/A

Negative Classes

Value Top Right Bottom Left L/R T/B All
1px .d-tn1 .d-rn1 .d-bn1 .d-ln1 .d-xn1 .d-yn1 .d-alln1
2px .d-tn2 .d-rn2 .d-bn2 .d-ln2 .d-xn2 .d-yn2 .d-alln2
4px .d-tn4 .d-rn4 .d-bn4 .d-ln4 .d-xn4 .d-yn4 .d-alln4
6px .d-tn6 .d-rn6 .d-bn6 .d-ln6 .d-xn6 .d-yn6 .d-alln6
8px .d-tn8 .d-rn8 .d-bn8 .d-ln8 .d-xn8 .d-yn8 .d-alln8
12px .d-tn12 .d-rn12 .d-bn12 .d-ln12 .d-xn12 .d-yn12 .d-alln12
16px .d-tn16 .d-rn16 .d-bn16 .d-ln16 .d-xn16 .d-yn16 .d-alln16
24px .d-tn24 .d-rn24 .d-bn24 .d-ln24 .d-xn24 .d-yn24 .d-alln24
32px .d-tn32 .d-rn32 .d-bn32 .d-ln32 .d-xn32 .d-yn32 .d-alln32
48px .d-tn48 .d-rn48 .d-bn48 .d-ln48 .d-xn48 .d-yn48 .d-alln48
64px .d-tn64 .d-rn64 .d-bn64 .d-ln64 .d-xn64 .d-yn64 .d-alln64
50% .d-tn50 .d-rn50 .d-bn50 .d-ln50 N/A N/A N/A
100% .d-tn100 .d-rn100 .d-bn100 .d-ln100 N/A N/A N/A
100-calc .d-tn100-calc .d-rn100-calc .d-bn100-calc .d-ln100-calc N/A N/A N/A