Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

<div class="row">
  <div
    class="col p-3 mb-2 bg-secondary text-white mx-3 d-flex
    justify-content-center align-items-center rounded shadow-sm position-relative">
    <div class="flex-grow-1 text-center">{{parentName}}</div>
    <div class="spinner-border text-white position-absolute"
         style="right: 5px;"
         role="status" [ngClass]="{invisible:spinnerInvisibility}">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>

Reference
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://www.quora.com/What-does-it-mean-when-the-parent-has-position-relative-and-the-child-has-position-absolute-in-CSS
https://css-tricks.com/forums/topic/add-and-overlay-div-in-nested-flex-box-container/

Related