Position • Natura11y Inclusive Framework

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