Position

Use these shorthand utilities for quickly configuring the position of an element.

¶Usage

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

¶Static

This is the default value of any element. Using the static positioning, elements render in order, as they appear in the document flow.

<div class="position-static ...">
    <div class="position-absolute bottom-0 start-0 ...">
        ...
    </div>
</div>

¶Relative

The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position.

<div class="position-relative ...">
    <div class="position-absolute bottom-0 start-0 ...">
        ...
    </div>
</div>

¶Sticky

The element is positioned based on the user's scroll position

<div>
    <div class="position-sticky top-0 ...">
        Fixed position
    </div>
    ...
</div>
<div>
    <div class="position-sticky top-0 ...">
        Fixed position
    </div>
    ...
</div>
<div>
    <div class="position-sticky top-0 ...">
        Fixed position
    </div>
    ...
</div>

¶Responsive

Responsive variations also exist for each position value. Use the .position-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing position utility.

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