Positive Coordinates #
Examples #
Use d-t-{stop}, d-r-{stop}, d-b-{stop}, d-l-{stop}, d-x-{stop}, d-y-{stop}, d-all-{stop} to absolutely position elements. Logical property aliases are also available: d-ibs-{stop} (inset-block-start), d-iie-{stop} (inset-inline-end), d-ibe-{stop} (inset-block-end), d-iis-{stop} (inset-inline-start).
<div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-x-0 d-ibs-0 d-bgc-moderate-opaque d-bar-300 d-h50p">1</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-y-0 d-iie-0 d-bgc-moderate-opaque d-bar-300 d-w50p">2</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-x-0 d-ibe-0 d-bgc-moderate-opaque d-bar-300 d-h50p">3</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-y-0 d-iis-0 d-bgc-moderate-opaque d-bar-300 d-w50p">4</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-all-0 d-bgc-moderate-opaque d-bar-300">5</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-iis-0 d-ibs-0 d-bgc-moderate-opaque d-bar-300 d-size-50p">6</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-iie-0 d-ibs-0 d-bgc-moderate-opaque d-bar-300 d-size-50p">7</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-iie-0 d-ibe-0 d-bgc-moderate-opaque d-bar-300 d-size-50p">8</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-iis-0 d-ibe-0 d-bgc-moderate-opaque d-bar-300 d-size-50p">9</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-all-100 d-bgc-moderate-opaque d-bar-300">10</dt-stack></div>
Classes #
| Value | inset-block-start | inset-inline-end | inset-block-end | inset-inline-start | inset-inline | inset-block | inset |
|---|---|---|---|---|---|---|---|
| 0 | d-ibs-0 | d-iie-0 | d-ibe-0 | d-iis-0 | d-x-0 | d-y-0 | d-all-0 |
| 0.1rem 1px | d-ibs-1 | d-iie-1 | d-ibe-1 | d-iis-1 | d-x-1 | d-y-1 | d-all-1 |
| 0.2rem 2px | d-ibs-25 | d-iie-25 | d-ibe-25 | d-iis-25 | d-x-25 | d-y-25 | d-all-25 |
| 0.4rem 4px | d-ibs-50 | d-iie-50 | d-ibe-50 | d-iis-50 | d-x-50 | d-y-50 | d-all-50 |
| 0.6rem 6px | d-ibs-75 | d-iie-75 | d-ibe-75 | d-iis-75 | d-x-75 | d-y-75 | d-all-75 |
| 0.8rem 8px | d-ibs-100 | d-iie-100 | d-ibe-100 | d-iis-100 | d-x-100 | d-y-100 | d-all-100 |
| 1rem 10px | d-ibs-125 | d-iie-125 | d-ibe-125 | d-iis-125 | d-x-125 | d-y-125 | d-all-125 |
| 1.2rem 12px | d-ibs-150 | d-iie-150 | d-ibe-150 | d-iis-150 | d-x-150 | d-y-150 | d-all-150 |
| 1.4rem 14px | d-ibs-175 | d-iie-175 | d-ibe-175 | d-iis-175 | d-x-175 | d-y-175 | d-all-175 |
| 1.6rem 16px | d-ibs-200 | d-iie-200 | d-ibe-200 | d-iis-200 | d-x-200 | d-y-200 | d-all-200 |
| 2rem 20px | d-ibs-250 | d-iie-250 | d-ibe-250 | d-iis-250 | d-x-250 | d-y-250 | d-all-250 |
| 2.4rem 24px | d-ibs-300 | d-iie-300 | d-ibe-300 | d-iis-300 | d-x-300 | d-y-300 | d-all-300 |
| 2.8rem 28px | d-ibs-350 | d-iie-350 | d-ibe-350 | d-iis-350 | d-x-350 | d-y-350 | d-all-350 |
| 3.2rem 32px | d-ibs-400 | d-iie-400 | d-ibe-400 | d-iis-400 | d-x-400 | d-y-400 | d-all-400 |
| 3.6rem 36px | d-ibs-450 | d-iie-450 | d-ibe-450 | d-iis-450 | d-x-450 | d-y-450 | d-all-450 |
| 4rem 40px | d-ibs-500 | d-iie-500 | d-ibe-500 | d-iis-500 | d-x-500 | d-y-500 | d-all-500 |
| 4.2rem 42px | d-ibs-525 | d-iie-525 | d-ibe-525 | d-iis-525 | d-x-525 | d-y-525 | d-all-525 |
| 4.4rem 44px | d-ibs-550 | d-iie-550 | d-ibe-550 | d-iis-550 | d-x-550 | d-y-550 | d-all-550 |
| 4.8rem 48px | d-ibs-600 | d-iie-600 | d-ibe-600 | d-iis-600 | d-x-600 | d-y-600 | d-all-600 |
| 5.2rem 52px | d-ibs-650 | d-iie-650 | d-ibe-650 | d-iis-650 | d-x-650 | d-y-650 | d-all-650 |
| 5.6rem 56px | d-ibs-700 | d-iie-700 | d-ibe-700 | d-iis-700 | d-x-700 | d-y-700 | d-all-700 |
| 6rem 60px | d-ibs-750 | d-iie-750 | d-ibe-750 | d-iis-750 | d-x-750 | d-y-750 | d-all-750 |
| 6.4rem 64px | d-ibs-800 | d-iie-800 | d-ibe-800 | d-iis-800 | d-x-800 | d-y-800 | d-all-800 |
| 50% | d-ibs50p | d-iie50p | d-ibe50p | d-iis50p | N/A | N/A | N/A |
| 100% | d-ibs100p | d-iie100p | d-ibe100p | d-iis100p | N/A | N/A | N/A |
| calc(100% + 8px) | d-ibs100p-calc | d-iie100p-calc | d-ibe100p-calc | d-iis100p-calc | N/A | N/A | N/A |
Negative Coordinates #
Examples #
Use d-t-{stop}, d-r-{stop}, d-b-{stop}, d-l-{stop}, d-x-{stop}, d-y-{stop}, d-all-{stop} to absolutely position elements. Logical property aliases are also available: d-ibs-{stop} (inset-block-start), d-iie-{stop} (inset-inline-end), d-ibe-{stop} (inset-block-end), d-iis-{stop} (inset-inline-start).
<div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-x-n25 d-ibs-n25 d-bgc-moderate-opaque d-bar-300 d-h50p">1</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-y-n25 d-iie-n25 d-bgc-moderate-opaque d-bar-300 d-w50p">2</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-x-n25 d-ibe-n25 d-bgc-moderate-opaque d-bar-300 d-h50p">3</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-y-n25 d-iis-n25 d-bgc-moderate-opaque d-bar-300 d-w50p">4</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-all-n25 d-bgc-moderate-opaque d-bar-300">5</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-iis-n50 d-ibs-n50 d-bgc-moderate-opaque d-bar-300 d-size-50p">6</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-iie-n100 d-ibs-n100 d-bgc-moderate-opaque d-bar-300 d-size-50p">7</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-iie-n100 d-ibe-n100 d-bgc-moderate-opaque d-bar-300 d-size-50p">8</dt-stack></div> <div class="d-ps-relative d-h-200 d-bar-400 d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-ps-absolute d-iis-n50 d-ibe-n50 d-bgc-moderate-opaque d-bar-300 d-size-50p">9</dt-stack></div>
Classes #
| Value | inset-block-start | inset-inline-end | inset-block-end | inset-inline-start | inset-inline | inset-block | inset |
|---|---|---|---|---|---|---|---|
| 0.1rem 1px | d-ibs-n1 | d-iie-n1 | d-ibe-n1 | d-iis-n1 | d-x-n1 | d-y-n1 | d-all-n1 |
| 0.2rem 2px | d-ibs-n25 | d-iie-n25 | d-ibe-n25 | d-iis-n25 | d-x-n25 | d-y-n25 | d-all-n25 |
| 0.4rem 4px | d-ibs-n50 | d-iie-n50 | d-ibe-n50 | d-iis-n50 | d-x-n50 | d-y-n50 | d-all-n50 |
| 0.6rem 6px | d-ibs-n75 | d-iie-n75 | d-ibe-n75 | d-iis-n75 | d-x-n75 | d-y-n75 | d-all-n75 |
| 0.8rem 8px | d-ibs-n100 | d-iie-n100 | d-ibe-n100 | d-iis-n100 | d-x-n100 | d-y-n100 | d-all-n100 |
| 1rem 10px | d-ibs-n125 | d-iie-n125 | d-ibe-n125 | d-iis-n125 | d-x-n125 | d-y-n125 | d-all-n125 |
| 1.2rem 12px | d-ibs-n150 | d-iie-n150 | d-ibe-n150 | d-iis-n150 | d-x-n150 | d-y-n150 | d-all-n150 |
| 1.4rem 14px | d-ibs-n175 | d-iie-n175 | d-ibe-n175 | d-iis-n175 | d-x-n175 | d-y-n175 | d-all-n175 |
| 1.6rem 16px | d-ibs-n200 | d-iie-n200 | d-ibe-n200 | d-iis-n200 | d-x-n200 | d-y-n200 | d-all-n200 |
| 2rem 20px | d-ibs-n250 | d-iie-n250 | d-ibe-n250 | d-iis-n250 | d-x-n250 | d-y-n250 | d-all-n250 |
| 2.4rem 24px | d-ibs-n300 | d-iie-n300 | d-ibe-n300 | d-iis-n300 | d-x-n300 | d-y-n300 | d-all-n300 |
| 2.8rem 28px | d-ibs-n350 | d-iie-n350 | d-ibe-n350 | d-iis-n350 | d-x-n350 | d-y-n350 | d-all-n350 |
| 3.2rem 32px | d-ibs-n400 | d-iie-n400 | d-ibe-n400 | d-iis-n400 | d-x-n400 | d-y-n400 | d-all-n400 |
| 3.6rem 36px | d-ibs-n450 | d-iie-n450 | d-ibe-n450 | d-iis-n450 | d-x-n450 | d-y-n450 | d-all-n450 |
| 4rem 40px | d-ibs-n500 | d-iie-n500 | d-ibe-n500 | d-iis-n500 | d-x-n500 | d-y-n500 | d-all-n500 |
| 4.2rem 42px | d-ibs-n525 | d-iie-n525 | d-ibe-n525 | d-iis-n525 | d-x-n525 | d-y-n525 | d-all-n525 |
| 4.4rem 44px | d-ibs-n550 | d-iie-n550 | d-ibe-n550 | d-iis-n550 | d-x-n550 | d-y-n550 | d-all-n550 |
| 4.8rem 48px | d-ibs-n600 | d-iie-n600 | d-ibe-n600 | d-iis-n600 | d-x-n600 | d-y-n600 | d-all-n600 |
| 5.2rem 52px | d-ibs-n650 | d-iie-n650 | d-ibe-n650 | d-iis-n650 | d-x-n650 | d-y-n650 | d-all-n650 |
| 5.6rem 56px | d-ibs-n700 | d-iie-n700 | d-ibe-n700 | d-iis-n700 | d-x-n700 | d-y-n700 | d-all-n700 |
| 6rem 60px | d-ibs-n750 | d-iie-n750 | d-ibe-n750 | d-iis-n750 | d-x-n750 | d-y-n750 | d-all-n750 |
| 6.4rem 64px | d-ibs-n800 | d-iie-n800 | d-ibe-n800 | d-iis-n800 | d-x-n800 | d-y-n800 | d-all-n800 |
| 50% | d-ibsn50p | d-iien50p | d-iben50p | d-iisn50p | N/A | N/A | N/A |
| 100% | d-ibsn100p | d-iien100p | d-iben100p | d-iisn100p | N/A | N/A | N/A |
| calc(100% + 8px) | d-ibsn100p-calc | d-iien100p-calc | d-iben100p-calc | d-iisn100p-calc | N/A | N/A | N/A |