Position • Natura11y
Sun going down behind pine trees near mountain under a sunset

Photo by Sergei A



Change the position property of an element.

Position Utilities

Natura11y provides the following position utilities:

        <div class="position-static">...</div>
        <div class="position-relative">...</div>
        <div class="position-absolute">...</div>
        <div class="position-fixed">...</div>
        <div class="position-sticky">...</div>
Figure 1

Position Absolute (Directional) Utilities

You can swap the .position-absolute utility with any of the four directional utilities shown in Figure 2. Doing so applies the absolute position and direction at once.





        <div class="position-relative">
            <div class="position-top-left">...</div>
            <div class="position-top-right">...</div>
            <div class="position-bottom-left">...</div>
            <div class="position-bottom-right">...</div>
Figure 2