Position • Natura11y Design Ecosystem

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-top">...</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-top-left

.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>