<!-- Position values -->
<div class="position-static">Default static position</div>
<div class="position-relative">Relative to normal position</div>
<div class="position-absolute">Absolute within nearest positioned ancestor</div>
<div class="position-fixed">Fixed relative to viewport</div>
<div class="position-sticky">Sticky based on scroll position</div>

<!-- Sticky with top offset -->
<div class="position-sticky top-0">
  Sticks to top when scrolling
</div>

<div class="position-sticky bottom-0">
  Sticks to bottom when scrolling
</div>

<!-- Fixed with positioning -->
<div class="position-fixed top-0 end-0">
  Fixed to top right corner
</div>

<!-- Absolute within relative container -->
<div class="position-relative" style="height: 200px;">
  <div class="position-absolute top-50 start-50">
    Centered absolutely
  </div>
</div>

<!-- Placement utilities -->
<!-- Top, Right, Bottom, Left (0%) -->
<div class="top-0">top: 0</div>
<div class="end-0">right: 0 (RTL: left: 0)</div>
<div class="bottom-0">bottom: 0</div>
<div class="start-0">left: 0 (RTL: right: 0)</div>

<!-- 50% placement -->
<div class="top-50">top: 50%</div>
<div class="start-50">left: 50% (RTL: right: 50%)</div>

<!-- 100% placement -->
<div class="top-100">top: 100%</div>
<div class="start-100">left: 100% (RTL: right: 100%)</div>

<!-- Percentage values (25%, 50%, 75%, 100%) -->
<div class="top-25">top: 25%</div>
<div class="end-50">right: 50%</div>
<div class="bottom-75">bottom: 75%</div>
<div class="start-100">left: 100%</div>

<!-- Corner combinations -->
<div class="top-0 start-0">Top left corner</div>
<div class="top-0 end-0">Top right corner</div>
<div class="bottom-0 start-0">Bottom left corner</div>
<div class="bottom-0 end-0">Bottom right corner</div>

<!-- Center combinations -->
<div class="top-50 start-50 translate-middle">Absolute center</div>
<div class="top-0 start-50 translate-middle-x">Top center</div>
<div class="top-50 start-0 translate-middle-y">Left center</div>

<!-- Responsive placement -->
<div class="top-0 top-md-50">Top 0 on mobile, top 50% on tablet+</div>
<div class="start-0 start-lg-50">Left 0 on mobile, left 50% on desktop</div>

<!-- Translate middle utilities -->
<div class="translate-middle">
  transform: translate(-50%, -50%);
</div>

<div class="translate-middle-x">
  transform: translateX(-50%);
</div>

<div class="translate-middle-y">
  transform: translateY(-50%);
</div>

<!-- Perfect centering pattern -->
<div class="position-relative" style="height: 300px;">
  <div class="position-absolute top-50 start-50 translate-middle">
    Perfectly centered element
  </div>
</div>

<!-- Horizontal centering -->
<div class="position-relative">
  <div class="position-absolute start-50 translate-middle-x">
    Horizontally centered
  </div>
</div>

<!-- Vertical centering -->
<div class="position-relative">
  <div class="position-absolute top-50 translate-middle-y">
    Vertically centered
  </div>
</div>

<!-- Multiple elements centered -->
<div class="position-relative" style="height: 200px;">
  <div class="position-absolute top-0 start-50 translate-middle-x">
    Top centered
  </div>
  <div class="position-absolute top-50 start-50 translate-middle">
    Middle centered
  </div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x">
    Bottom centered
  </div>
</div>

<!-- Responsive translate -->
<div class="translate-middle translate-md-none">
  <!-- Centered on mobile, normal on desktop -->
</div>

<!-- Fixed top -->
<div class="fixed-top">
  Fixed to top of viewport
</div>

<!-- Fixed bottom -->
<div class="fixed-bottom">
  Fixed to bottom of viewport
</div>

<!-- Sticky top -->
<div class="sticky-top">
  Becomes fixed when scrolling past
</div>

<!-- Sticky bottom -->
<div class="sticky-bottom">
  Sticks to bottom when scrolling
</div>

<!-- Practical examples -->

<!-- Fixed header -->
<nav class="navbar fixed-top">
  <!-- Navigation stays at top -->
</nav>

<main class="container mt-5 pt-5">
  <!-- Content with top padding for fixed nav -->
</main>

<!-- Fixed footer -->
<footer class="fixed-bottom bg-dark text-white p-3">
  <!-- Always visible footer -->
</footer>

<!-- Sticky table headers -->
<div class="table-responsive" style="max-height: 300px;">
  <table class="table">
    <thead class="sticky-top bg-white">
      <tr>
        <th>Sticky Header</th>
        <th>Remains visible</th>
      </tr>
    </thead>
    <tbody>
      <!-- Table content -->
    </tbody>
  </table>
</div>

<!-- Multiple sticky elements -->
<div style="height: 400px; overflow-y: auto;">
  <div class="sticky-top bg-light p-2">Header 1</div>
  <div class="p-3">Content section 1</div>
  <div class="sticky-top bg-light p-2" style="top: 50px;">Header 2</div>
  <div class="p-3">Content section 2</div>
</div>

<!-- Responsive position values -->
<div class="position-relative position-md-absolute position-lg-fixed">
  <!-- Relative on mobile, absolute on tablet, fixed on desktop -->
</div>

<div class="position-sticky position-md-static">
  <!-- Sticky on mobile, static on tablet+ -->
</div>

<!-- Responsive placement -->
<div class="top-0 top-md-50 top-lg-100">
  <!-- Top: 0 on mobile, 50% on tablet, 100% on desktop -->
</div>

<div class="start-0 start-md-50 start-lg-100">
  <!-- Left: 0 on mobile, 50% on tablet, 100% on desktop -->
</div>

<!-- Responsive translate -->
<div class="translate-middle translate-md-none">
  <!-- Centered on mobile, normal on tablet+ -->
</div>

<div class="translate-middle-x translate-lg-middle-y">
  <!-- Horizontal center on mobile, vertical center on desktop -->
</div>

<!-- Complete responsive example -->
<div class="position-relative position-md-absolute position-lg-fixed
            top-0 top-md-50 top-lg-100
            start-0 start-md-50 start-lg-0
            translate-middle translate-md-none translate-lg-middle">
  Complex responsive positioning
</div>

<!-- Responsive fixed/sticky -->
<nav class="navbar fixed-top fixed-md-static">
  <!-- Fixed on mobile, static on tablet+ -->
</nav>

<div class="sticky-top sticky-md-bottom">
  <!-- Sticky top on mobile, sticky bottom on tablet+ -->
</div>

Content on top

Image Overlay

Image Caption

Overlay text positioned absolutely

Badge Overlap

3

Inbox5

<!-- Image with overlay -->
<div class="position-relative">
  <Image width={600} height={400} src="image.jpg" class="img-fluid" alt="">
  
  <!-- Dark gradient overlay -->
  <div class="position-absolute bottom-0 start-0 w-100 
              bg-gradient-dark text-white p-3">
    <h5>Image Title</h5>
    <p>Description text</p>
  </div>
</div>

<!-- Avatar with notification badge -->
<div class="position-relative d-inline-block">
  <Image width={600} height={400} src="avatar.jpg" class="rounded-circle" alt="User">
  
  <!-- Badge positioned outside -->
  <span class="position-absolute top-0 start-100 translate-middle
               badge rounded-pill bg-danger">
    3
  </span>
</div>

<!-- Button with badge -->
<button class="btn btn-primary position-relative">
  Notifications
  <span class="position-absolute top-0 start-100 translate-middle
               badge rounded-pill bg-danger">
    5
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

<!-- Overlapping cards -->
<div class="position-relative">
  <div class="card position-absolute top-0 start-0 w-75">
    <!-- Background card -->
  </div>
  <div class="card position-absolute top-25 start-25 w-75 z-1">
    <!-- Foreground card -->
  </div>
</div>

<!-- Gradient overlay -->
<div class="position-relative">
  <div class="bg-image"></div>
  <div class="position-absolute top-0 start-0 w-100 h-100
              bg-gradient-primary bg-opacity-75">
    <!-- Gradient overlay -->
  </div>
  <div class="position-relative z-1 text-white">
    <!-- Content on top -->
  </div>
</div>