- ☀️Light
- 🌙Dark
- 💻System
📐 What are position utilities used for?
Position utilities allow you to quickly control how an element is placed relative to the page flow, its container, or the viewport. They include standard CSS position values, z-index layers, centering helpers, corner shortcuts, and sticky or fixed viewport placements.
These utilities are especially useful for tooltips, overlays, dropdowns, modals, floating UI elements, or any component requiring precise placement.
📏 Position Utilities Reference
Each class below shows the exact CSS applied, without code blocks to keep cards clean.
.z-0
Sets the element’s stacking order to 0.
z-index: 0;
.z-1
Sets the element’s stacking order to 1.
z-index: 1;
.z-10
Sets the element’s stacking order to 10.
z-index: 10;
.z-20
Sets the element’s stacking order to 20.
z-index: 20;
.z-30
Sets the element’s stacking order to 30.
z-index: 30;
.z-40
Sets the element’s stacking order to 40.
z-index: 40;
.z-50
Sets the element’s stacking order to 50.
z-index: 50;
.z-60
Sets the element’s stacking order to 60.
z-index: 60;
.z-70
Sets the element’s stacking order to 70.
z-index: 70;
.z-80
Sets the element’s stacking order to 80.
z-index: 80;
.z-90
Sets the element’s stacking order to 90.
z-index: 90;
.z-100
Sets the element’s stacking order to 100.
z-index: 100;
.z-200
Sets the element’s stacking order to 200.
z-index: 200;
.z-300
Sets the element’s stacking order to 300.
z-index: 300;
.z-400
Sets the element’s stacking order to 400.
z-index: 400;
.z-500
Sets the element’s stacking order to 500.
z-index: 500;
.z-600
Sets the element’s stacking order to 600.
z-index: 600;
.z-700
Sets the element’s stacking order to 700.
z-index: 700;
.z-800
Sets the element’s stacking order to 800.
z-index: 800;
.z-900
Sets the element’s stacking order to 900.
z-index: 900;
.z-1000
Sets the element’s stacking order to 1000.
z-index: 1000;
.position-static
Default static positioning.
position: static;
.position-static
Default static positioning.
position: static;
.position-relative
Offsets children using absolute positioning.
position: relative;
.position-absolute
Positions element relative to nearest ancestor.
position: absolute;
.position-fixed
Fixes element to the viewport.
position: fixed;
.position-sticky
Sticks element during scroll.
position: sticky;
.position-top-left
Top-left corner.
position: absolute; top: 0; left: 0;
.position-top-right
Top-right corner.
position: absolute; top: 0; right: 0;
.position-bottom-left
Bottom-left corner.
position: absolute; bottom: 0; left: 0;
.position-bottom-right
Bottom-right corner.
position: absolute; bottom: 0; right: 0;
.position-center
Centered on both axes.
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
.position-x-center
Centered horizontally.
position: absolute; left: 50%; transform: translateX(-50%);
.position-y-center
Centered vertically.
position: absolute; top: 50%; transform: translateY(-50%);
.sticky-top
Sticks to the top.
position: sticky; top: 0;
.sticky-bottom
Sticks to the bottom.
position: sticky; bottom: 0;
.fixed-top
Fixed at the top.
position: fixed; top: 0; left: 0; right: 0;
.fixed-bottom
Fixed at the bottom.
position: fixed; bottom: 0; left: 0; right: 0;
.fixed-left
Fixed on the left side.
position: fixed; top: 0; bottom: 0; left: 0;
.fixed-right
Fixed on the right side.
position: fixed; top: 0; bottom: 0; right: 0;