Position:fixed, moved up the div

Question

Here is the my sample HTML file. on click I am adding position:fixed to both divs:- claims-side-panel and alert-section. For claims-side-panel, div also moved up but I fixed it by giving additional property margin-top:auto.

For alert-section I tried top:0 (it further move up the element to header) and margin-top:auto but its not working

 <div class="claims-main-wrapper mt-4">
      <aside class="col-lg-4 mt-5">
        <div class="claims-side-panel">

           <li>.SOme content..</li>
           <li>.SOme content..</li>
           <li>.SOme content..</li>
        </div>
        <div class="alert-section">
          SOme content
        </div>
      </aside>
    </div>

Below is the CSS file before adding position:fixed to claims-side-panel and alerts-section

div.claims-main-wrapper {
  .fa-spinner {
    @include font-size(40px);
    position: absolute;
    margin: 60px auto; 
    left: 50%;
  }
  aside {
    .claims-side-panel {
      width: 400px;
    }
  }
  div.alert-section {
    width: 400px;
    padding-top: 0;
    .table thead th {
      border-bottom: 1px solid $border-color;
    }
    .table th,
    .table td {
      border-top: 0;
    }
    .table td span.duplicateStatus {
      background-color: $contribution-status-color;
      padding: 7px 12px 6px 15px;
      color: $text-contrast-light;
      border-radius: 15px;
      text-transform: uppercase;
      @include font-size(12px);
      text-align: center;
      font-family: $tertiaryFontFamily;
      padding: 7px 12px 6px 15px;
      font-weight: bold;
    }
  }    
}

Please find image before adding the position:fixedto alert-section and that's the expected result

Image after adding the position:fixed

Answer 1

position: fixed; positions the element relative to the entire browser window, whereas position: absolute; positions the element relative to the closest parent with position: relative;.