位置：固定，向 上移动div

Posted 2021-05-04

这是我的示例html文件。点击我将position:fixed添加到两个div： - claims-side-panel和alert-section。对于claims-side-panel，div也向上移动，但我通过提供额外的财产margin-top:auto来修复它。

对于alert-section我尝试了top:0（它进一步向上移动元素到标题）和margin-top:auto但它不工作

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

下面是添加位置之前的CSS文件：固定为claims-side-panel和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;
    }
  }    
}

请在添加position:fixedto alert-section之前找到图像，这是预期的结果

添加position:fixed 后的图像

答案

position: fixed;相对于整个浏览器窗口定位元素，而position: absolute;将元素相对于最接近的父元素与position: relative;定位。