Header

Position

Sets how the element is positioned in the DOM

Class reference

Class
Output
.p-static
position: static;
.p-relative
position: relative;
.p-absolute
position: absolute;
.p-fixed
position: fixed;
.p-sticky
position: sticky;

Abbreviation

Abbreviation
Definition
t
top
r
right
b
bottom
l
left
nt
negative top
nr
negative right
nb
negative bottom
nl
negative left

Example

static
relative
absolute
sticky
<div className="p-static">...</div>
<div className="p-relative t-5 l-10">...</div>
<div className="p-absolute t-12 r-15">...</div>
<div className="p-sticky t-15">...</div>

Positive coordinates

Prefix
0px
4px
8px
12px
16px
20px
24px
28px
...
80px
t
.t-0
.t-1
.t-2
.t-3
.t-4
.t-5
.t-6
.t-7
...
.t-20
r
.r-0
.r-1
.r-2
.r-3
.r-4
.r-5
.r-6
.r-7
...
.r-20
b
.b-0
.b-1
.b-2
.b-3
.b-4
.b-5
.b-6
.b-7
...
.b-20
l
.l-0
.l-1
.l-2
.l-3
.l-4
.l-5
.l-6
.l-7
...
.l-20

Negative coordinates

Prefix
0px
4px
8px
12px
16px
20px
24px
28px
...
80px
nt
.nt-0
.nt-1
.nt-2
.nt-3
.nt-4
.nt-5
.nt-6
.nt-7
...
.nt-20
nr
.nr-0
.nr-1
.nr-2
.nr-3
.nr-4
.nr-5
.nr-6
.nr-7
...
.nr-20
nb
.nb-0
.nb-1
.nb-2
.nb-3
.nb-4
.nb-5
.nb-6
.nb-7
...
.nb-20
nl
.nl-0
.nl-1
.nl-2
.nl-3
.nl-4
.nl-5
.nl-6
.nl-7
...
.nl-20

Example

.b-1 .r-5
.t-5 .r-15
.t-10 .l-12
<div className="p-absolute b-1 r-5"></div>
<div className="p-absolute t-5 r-15"></div>
<div className="p-absolute t-10 l-12"></div>
←Back to: Overflow
See next: Spacing→

Jump to