Position
Position and top/bottom/right/left utility classes:
Position #
Position utility classes:
| CSS Class | Description |
|---|---|
p{p}osition-relative |
position: relative; |
p{p}osition-absolute |
position: absolute; |
p{p}osition-fixed |
position: fixed; |
p{p}osition-sticky |
position: sticky; |
p{p}osition-static |
position: static; |
Top/Bottom/Right/Left #
Inset utility class:
| CSS Class | Description |
|---|---|
i{p}nset-0 |
top: 0; right: 0; bottom: 0; left: 0; |
Top utility classes:
| CSS Class | Description |
|---|---|
t{p}op-0 |
top: 0; |
t{p}op-50% |
top: 50%; |
t{p}op-4xs |
top: var(--space-4xs); |
t{p}op-3xs |
top: var(--space-3xs); |
t{p}op-2xs |
top: var(--space-2xs); |
t{p}op-xs |
top: var(--space-xs); |
t{p}op-sm |
top: var(--space-sm); |
t{p}op-md |
top: var(--space-md); |
t{p}op-lg |
top: var(--space-lg); |
t{p}op-xl |
top: var(--space-xl); |
t{p}op-2xl |
top: var(--space-2xl); |
t{p}op-3xl |
top: var(--space-3xl); |
t{p}op-4xl |
top: var(--space-4xl); |
Bottom utility classes:
| CSS Class | Description |
|---|---|
b{p}ottom-0 |
bottom: 0; |
b{p}ottom-50% |
bottom: 50%; |
b{p}ottom-4xs |
bottom: var(--space-4xs); |
b{p}ottom-3xs |
bottom: var(--space-3xs); |
b{p}ottom-2xs |
bottom: var(--space-2xs); |
b{p}ottom-xs |
bottom: var(--space-xs); |
b{p}ottom-sm |
bottom: var(--space-sm); |
b{p}ottom-md |
bottom: var(--space-md); |
b{p}ottom-lg |
bottom: var(--space-lg); |
b{p}ottom-xl |
bottom: var(--space-xl); |
b{p}ottom-2xl |
bottom: var(--space-2xl); |
b{p}ottom-3xl |
bottom: var(--space-3xl); |
b{p}ottom-4xl |
bottom: var(--space-4xl); |
Right utility classes:
| CSS Class | Description |
|---|---|
r{p}ight-0 |
right: 0; |
r{p}ight-50% |
right: 50%; |
r{p}ight-4xs |
right: var(--space-4xs); |
r{p}ight-3xs |
right: var(--space-3xs); |
r{p}ight-2xs |
right: var(--space-2xs); |
r{p}ight-xs |
right: var(--space-xs); |
r{p}ight-sm |
right: var(--space-sm); |
r{p}ight-md |
right: var(--space-md); |
r{p}ight-lg |
right: var(--space-lg); |
r{p}ight-xl |
right: var(--space-xl); |
r{p}ight-2xl |
right: var(--space-2xl); |
r{p}ight-3xl |
right: var(--space-3xl); |
r{p}ight-4xl |
right: var(--space-4xl); |
Left utility classes:
| CSS Class | Description |
|---|---|
l{p}eft-0 |
left: 0; |
l{p}eft-50% |
left: 50%; |
l{p}eft-4xs |
left: var(--space-4xs); |
l{p}eft-3xs |
left: var(--space-3xs); |
l{p}eft-2xs |
left: var(--space-2xs); |
l{p}eft-xs |
left: var(--space-xs); |
l{p}eft-sm |
left: var(--space-sm); |
l{p}eft-md |
left: var(--space-md); |
l{p}eft-lg |
left: var(--space-lg); |
l{p}eft-xl |
left: var(--space-xl); |
l{p}eft-2xl |
left: var(--space-2xl); |
l{p}eft-3xl |
left: var(--space-3xl); |
l{p}eft-4xl |
left: var(--space-4xl); |
Responsive #
Edit the position and inset at a specific breakpoint adding the @{breakpoint} suffix to the position utility classes:
<div class="position-sticky@md top-0@md">
<!-- ... -->
</div>How to Center #
How to center an absolutely positioned element using the position and transform classes:
<!-- how to center element -->
<div class="position-relative">
<div class="position-absolute top-50% left-50% -translate-50%">
Centered content!
</div>
</div>
<!-- how to horizontally center element -->
<div class="position-relative">
<div class="position-absolute left-50% -translate-x-50%">
Centered content!
</div>
</div>
<!-- how to vertically center element -->
<div class="position-relative">
<div class="position-absolute top-50% -translate-y-50%">
Centered content!
</div>
</div>
