Position • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

Sun going down behind pine trees near mountain under a sunset

Photo by Sergei A

Position

Introduction

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.

.position-absolute

.position-top-right

.position-bottom-left

.position-bottom-right


        <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>
        </div>
Figure 2