Dialtone

Coordinates

Utility classes to assign an element’s top, right, bottom, or left position.

Positive Coordinates

Classes

ValueTopRightBottomLeftL/RT/BAll
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-t50p.d-r50p.d-b50p.d-l50pN/AN/AN/A
100%.d-t100p.d-r100p.d-b100p.d-l100pN/AN/AN/A
100-calc.d-t100p-calc.d-r100p-calc.d-b100p-calc.d-l100p-calcN/AN/AN/A

Examples

Use the top|right|bottom|left|x|y|all utility classes to absolutely position elements within the nearest positioned element.

    <!-- Example 1 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-x0 d-t0 d-h50p">1</div>
    </div>

    <!-- Example 2 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-y0 d-r0 d-w50p">2</div>
    </div>

    <!-- Example 3 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-x0 d-b0 d-h50p">3</div>
    </div>

    <!-- Example 4 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-y0 d-l0 d-w50p">4</div>
    </div>

    <!-- Example 5 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-all0">5</div>
    </div>

    <!-- Example 6 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-t0 d-l0 d-w50p d-h50p">6</div>
    </div>

    <!-- Example 7 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-t0 d-r0 d-w50p d-h50p">7</div>
    </div>

    <!-- Example 8 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-b0 d-r0 d-w50p d-h50p">8</div>
    </div>

    <!-- Example 9 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-b0 d-l0 d-w50p d-h50p">9</div>
    </div>

    <!-- Example 10 -->
    <div class="d-ps-relative d-h128 d-w128">
        <div class="d-ps-absolute d-all8">10</div>
    </div>

Negative Coordinates

Classes

ValueTopRightBottomLeftL/RT/BAll
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-tn50p.d-rn50p.d-bn50p.d-ln50pN/AN/AN/A
100%.d-tn100p.d-rn100p.d-bn100p.d-ln100pN/AN/AN/A
100-calc.d-tn100p-calc.d-rn100p-calc.d-bn100p-calc.d-ln100p-calcN/AN/AN/A

Examples

Use the top|right|bottom|left|x|y|all utility classes to absolutely position elements within the nearest positioned element.

<!-- Example 1 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-xn2 d-tn2 d-h50p">1</div>
</div>

<!-- Example 2 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-yn2 d-rn2 d-w50p">2</div>
</div>

<!-- Example 3 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-xn2 d-bn2 d-h50p">3</div>
</div>

<!-- Example 4 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-yn2 d-ln2 d-w50p">4</div>
</div>

<!-- Example 5 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-alln2">5</div>
</div>

<!-- Example 6 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-tn4 d-ln4 d-w50p d-h50p">6</div>
</div>

<!-- Example 7 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-tn8 d-rn8 d-w50p d-h50p">7</div>
</div>

<!-- Example 8 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-bn8 d-rn8 d-w50p d-h50p">8</div>
</div>

<!-- Example 9 -->
<div class="d-ps-relative d-h128 d-w128">
  <div class="d-ps-absolute d-bn4 d-ln4 d-w50p d-h50p">9</div>
</div>
Last Updated: