The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
| Property | Class |
position: absolute;
|
.absolute |
position: fixed;
|
.fixed |
position: relative;
|
.relative |
position: static;
|
.static |
position: sticky;
|
.sticky |
Apart from using position:absolute we frequently use some popular combinations, here are some shorthands
.absolute-center
<div class="relative..." style="background-image: url(...);">
<div class="absolute-center..."></div>
</div>.absolute-left
<div class="relative..." style="background-image: url(...);">
<div class="absolute-left..."></div>
</div>.absolute-right
<div class="relative..." style="background-image: url(...);">
<div class="absolute-right..."></div>
</div>.absolute-top
<div class="relative..." style="background-image: url(...);">
<div class="absolute-top..."></div>
</div>.absolute-bottom
<div class="relative..." style="background-image: url(...);">
<div class="absolute-bottom..."></div>
</div>.absolute-full
<div class="relative..." style="background-image: url(...);">
<div class="absolute-full..."></div>
</div>Image Credit: Mikhail Vasilyev
Similar to absolute positions you can use fixed positions also
| Class |
.fixed-center
|
.fixed-left
|
.fixed-right
|
.fixed-top
|
.fixed-bottom
|
.fixed-full
|
Image Credit: Mikhail Vasilyev