Position | Spacial Docs

Position utilities

Responsive positioning

.position-{breakpoint}-{position}


                <div class="position-static"></div>

                <div class="position-sm-relative"></div>

                <div class="position-md-absolute"></div>

                <div class="position-lg-fixed"></div>

                <div class="position-xl-sticky"></div>

Relative top

For those cases when you need to make tiny changes up and down from 1 to 10 pixels. It sets position to relative and top in px.

.relative-top-(1-10) and .relative-top--(1-10) for negative values.


                <div class="relative-top-1"></div>

                <div class="relative-top-2"></div>

                <div class="relative-top-3"></div>

                <div class="relative-top-4"></div>

                <div class="relative-top-5"></div>

                <div class="relative-top-6"></div>

                <div class="relative-top-7"></div>

                <div class="relative-top-8"></div>

                <div class="relative-top-9"></div>

                <div class="relative-top-10"></div>



                <div class="relative-top--1"></div>

                <div class="relative-top--2"></div>

                <div class="relative-top--3"></div>

                <div class="relative-top--4"></div>

                <div class="relative-top--5"></div>

                <div class="relative-top--6"></div>

                <div class="relative-top--7"></div>

                <div class="relative-top--8"></div>

                <div class="relative-top--9"></div>

                <div class="relative-top--10"></div>