Position

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


Class
Properties
position-static
position-relative
position-absolute
position-fixed
position-sticky

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.

Static

Absolute

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

Relative

Absolute

<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

First block
Content
Second block
Content
Third block
Content
<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>
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->