BS5 Position

Position utilities

position-static
position-relative
position-absolute
position-fixed
position-sticky

Relative and absolute

Absolute positioning works relative to the nearest positioned ancestor.

<div class="position-relative" style="height: 160px;">
  <div class="position-absolute top-0 end-0 p-2 bg-warning">Badge</div>
</div>

Fixed top / bottom

<div class="fixed-top bg-dark text-white p-2">Fixed Top</div>
<div class="fixed-bottom bg-dark text-white p-2">Fixed Bottom</div>

Sticky top

Sticky elements stay visible while scrolling within their container.

<div class="sticky-top bg-light border p-2">Sticky header</div>

Position helpers

Use these helpers with positioned elements:

top-0 top-50 top-100
start-0 start-50 start-100
end-0 end-50 end-100
bottom-0 bottom-50 bottom-100
translate-middle translate-middle-x translate-middle-y

Common pattern: centered overlay

<div class="position-relative" style="height: 200px;">
  <div class="position-absolute top-50 start-50 translate-middle bg-dark text-white p-2 rounded">
    Centered
  </div>
</div>

Best practices

• Use position-sticky for headers/sidebars that should follow scroll
• Use fixed positioning sparingly (can hide content)
• Always test positioning on multiple screen sizes