There are classes that matches to the following formula.


Where pos_value corresponds to value of the css position property:

  • static
  • relative
  • absolute
  • sticky

The fixed-top specifies position an element at the top of the viewport, from edge to edge.

The fixed-bottom specifies position an element at the bottom of the viewport, from edge to edge.

The sticky-top specifies position an element at the top of the viewport, from edge to edge, but only after you scroll past it.

<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>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>


You can overlay one element on top of another using relative position for the container and absolute position for the overlay element.

In the example below, the button is overlaid on top of the gray content. The buttons are wrapped to make the outline buttons with a white background. Second button is wrapped into a div with rounded border, it looks better.

Instead the float-right class you can use a flex row with reverse order.

<!-- Container -->    
<div class="position-relative"> 
    <!-- overlay -->    
    <div class="position-absolute w-100 p-2">
        <span class="bg-white  float-right">
        <button class="btn btn-sm btn-outline-dark">
            Button 1

        <div class="rounded-sm bg-white float-right mx-2">
        <button class="btn btn-sm btn-outline-dark float-right">
            Button 2
    <!-- Main content -->
    <div class="p-2"
     style="width:100%; height: 300px; background-color: gray">
         Some content here    
Some content here

If you want to overlay an element on entire page like modal dialog, then you need only configure overlay element:

  1. set position-absolute
  2. set size w-100xh-100
  3. add z-index: val css rule