Gettıng started

Flexbox

Box Alignment

Spacing

Sizing

Border

Interaction

Helpers

Back to home

# Position

Controls how an element is positioned.
Class Property
relative posiiton: relative;
absolute posiiton: absolute;
fixed posiiton: fixed;
sticky posiiton: sticky;
static posiiton: static;
left-sm left: .25rem;
left-md left: .5rem;
left-base left: 1rem;
left-lg left: 1.5rem;
left-xl left: 2rem;
left-1 left: 1px;
left-2 left: 2px;
left-3 left: 3px;
left-4 left: 4px;
left-5 left: 5px;
left-6 left: 6px;
left-7 left: 7px;
left-8 left: 8px;
left-9 left: 9px;
left-10 left: 10px;
left-11 left: 11px;
left-12 left: 12px;
left-13 left: 13px;
left-14 left: 14px;
left-15 left: 15px;
left-16 left: 16px;
left-17 left: 17px;
left-18 left: 18px;
left-19 left: 19px;
left-20 left: 20px;
right-sm right: .25rem;
right-md right: .5rem;
right-base right: 1rem;
right-lg right: 1.5rem;
right-xl right: 2rem;
right-1 right: 1px;
right-2 right: 2px;
right-3 right: 3px;
right-4 right: 4px;
right-5 right: 5px;
right-6 right: 6px;
right-7 right: 7px;
right-8 right: 8px;
right-9 right: 9px;
right-10 right: 10px;
right-11 right: 11px;
right-12 right: 12px;
right-13 right: 13px;
right-14 right: 14px;
right-15 right: 15px;
right-16 right: 16px;
right-17 right: 17px;
right-18 right: 18px;
right-19 right: 19px;
right-20 right: 20px;
top-sm top: .25rem;
top-md top: .5rem;
top-base top: 1rem;
top-lg top: 1.5rem;
top-xl top: 2rem;
top-1 top: 1px;
top-2 top: 2px;
top-3 top: 3px;
top-4 top: 4px;
top-5 top: 5px;
top-6 top: 6px;
top-7 top: 7px;
top-8 top: 8px;
top-9 top: 9px;
top-10 top: 10px;
top-11 top: 11px;
top-12 top: 12px;
top-13 top: 13px;
top-14 top: 14px;
top-15 top: 15px;
top-16 top: 16px;
top-17 top: 17px;
top-18 top: 18px;
top-19 top: 19px;
top-20 top: 20px;
bottom-sm bottom: .25rem;
bottom-md bottom: .5rem;
bottom-base bottom: 1rem;
bottom-lg bottom: 1.5rem;
bottom-xl bottom: 2rem;
bottom-1 bottom: 1px;
bottom-2 bottom: 2px;
bottom-3 bottom: 3px;
bottom-4 bottom: 4px;
bottom-5 bottom: 5px;
bottom-6 bottom: 6px;
bottom-7 bottom: 7px;
bottom-8 bottom: 8px;
bottom-9 bottom: 9px;
bottom-10 bottom: 10px;
bottom-11 bottom: 11px;
bottom-12 bottom: 12px;
bottom-13 bottom: 13px;
bottom-14 bottom: 14px;
bottom-15 bottom: 15px;
bottom-16 bottom: 16px;
bottom-17 bottom: 17px;
bottom-18 bottom: 18px;
bottom-19 bottom: 19px;
bottom-20 bottom: 20px;

# Usage

{top|right|bottom|left} sınıflarının başına - eklemek, eksi yönde kullanım sağlar.
Normal use example;
.top-20

...

Downside usage example; => {-left-sm}
.-top-20

...

# Responsive

We can custom position it for each screen size. Just add (screen): to the beginning of the positioning class. Example md:right-0 Daha fazlası