Position

There are classes that matches to the following formula.

position{-pos_value}

Where pos_value corresponds to value of the css position property:

• static
• relative
• absolute
• sticky

arrange elements

Since v5 arrange elements easily with the edge positioning utilities.

{property}-{position}

Where property is one of:

• top - for the vertical top position
• start - for the horizontal left position (in LTR)
• bottom - for the vertical bottom position
• end - for the horizontal right position (in LTR)

Where position is one of:

• 0 - for 0 edge position
• 50 - for 50% edge position
• 100 - for 100% edge position

<style>#demo1 div{
    width:10px;
    height: 10px;
    background-color: red;
    }
</style>
<div class="position-relative border" id="demo1"style="width: 100%; height:100px;">
  <div class="position-absolute top-0 start-0 bg-danger"></div>
  <div class="position-absolute top-0 end-0 bg-danger"></div>
  <div class="position-absolute top-50 start-50 bg-danger"></div>
  <div class="position-absolute bottom-50 end-50 bg-danger"></div>
  <div class="position-absolute bottom-0 start-0 bg-danger"></div>
  <div class="position-absolute bottom-0 end-0 bg-danger"></div>
</div>

center elements

You can center elements by transformation classes:

• translate-middle - applies the transformations translateX(-50%) and translateY(-50%)
• translate-middle-x - applies the translateX(-50%) transformation
• translate-middle-y - applies the translateY(-50%) transformation

<style>#demo2 div{
    width:10px;
    height: 10px;
    background-color: red;
    }
</style>
<div id="demo2" class="position-relative border" style="width: 100%; height:100px;">
  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
</div>

fixed position

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 (may be not supported in some browsers).

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

overlay

If you want to overlay an element:

1. set position-relative for container
2. set position-absolute for content and overlay
3. set size (for entire page like modal dialog w-100xh-100)
4. add z-index: val css rule. For example, value 1 (default) for content and value 2 for overlay

<div id="demo2" class="position-relative border" 
     style="width: 100%; height:100px;">
  
  <div class="position-absolute"
       style="background-color: gray; width:100%; height: 100px;"></div>
  
  <div class="position-absolute border p-2"
       style="background-color: red; width:100%; 
              height: 70px;
              z-index: 2;">overlay</div>  
</div>