Position - v3
Position and top/bottom/right/left utility classes in CodyFrame v3:
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-xxxxs |
top: var(--space-xxxxs); |
t{p}op-xxxs |
top: var(--space-xxxs); |
t{p}op-xxs |
top: var(--space-xxs); |
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-xxl |
top: var(--space-xxl); |
t{p}op-xxxl |
top: var(--space-xxxl); |
t{p}op-xxxxl |
top: var(--space-xxxxl); |
Bottom utility classes:
| CSS Class | Description |
|---|---|
b{p}ottom-0 |
bottom: 0; |
b{p}ottom-50% |
bottom: 50%; |
b{p}ottom-xxxxs |
bottom: var(--space-xxxxs); |
b{p}ottom-xxxs |
bottom: var(--space-xxxs); |
b{p}ottom-xxs |
bottom: var(--space-xxs); |
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-xxl |
bottom: var(--space-xxl); |
b{p}ottom-xxxl |
bottom: var(--space-xxxl); |
b{p}ottom-xxxxl |
bottom: var(--space-xxxxl); |
Right utility classes:
| CSS Class | Description |
|---|---|
r{p}ight-0 |
right: 0; |
r{p}ight-50% |
right: 50%; |
r{p}ight-xxxxs |
right: var(--space-xxxxs); |
r{p}ight-xxxs |
right: var(--space-xxxs); |
r{p}ight-xxs |
right: var(--space-xxs); |
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-xxl |
right: var(--space-xxl); |
r{p}ight-xxxl |
right: var(--space-xxxl); |
r{p}ight-xxxxl |
right: var(--space-xxxxl); |
Left utility classes:
| CSS Class | Description |
|---|---|
l{p}eft-0 |
left: 0; |
l{p}eft-50% |
left: 50%; |
l{p}eft-xxxxs |
left: var(--space-xxxxs); |
l{p}eft-xxxs |
left: var(--space-xxxs); |
l{p}eft-xxs |
left: var(--space-xxs); |
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-xxl |
left: var(--space-xxl); |
l{p}eft-xxxl |
left: var(--space-xxxl); |
l{p}eft-xxxxl |
left: var(--space-xxxxl); |
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>
