Html 正在尝试为div添加位置修复

Html 正在尝试为div添加位置修复,html,css,sass,bootstrap-4,Html,Css,Sass,Bootstrap 4,我有两个分区索赔侧面板和警报部分。我需要为索赔侧面板添加position:fixed,以便它可以滚动移动。但是如果我添加位置:fixed则会干扰其他div的对齐,请检查我下面的代码 <div class="row"> <aside class="col-lg-4 mt-5"> <div class="claims-side-panel"> <ul>

我有两个分区
索赔侧面板
警报部分
。我需要为
索赔侧面板添加
position:fixed
,以便它可以滚动移动。但是如果我添加
位置:fixed
则会干扰其他div的对齐,请检查我下面的代码

        <div class="row">
          <aside class="col-lg-4 mt-5">
            <div class="claims-side-panel">
              <ul>
                <li>
                  <div class="claim-list-item">
                    <span class="fa" [ngClass]="{'image-icon': !claim.category.value }"
                      aria-hidden="true"></span>
                  </div>
                </li>

                </ng-container>
              </ul>
            </div>
            <div class="alert-section">
              <assisted-moment [assistData]="assistedMoment" sectionName="OtherRequirements"></assisted-moment>
            </div>
          </aside>

      </div>
    </div>
HTML

        <div class="row">
          <aside class="col-lg-4 mt-5">
            <div class="claims-side-panel">
              <ul>
                <li>
                  <div class="claim-list-item">
                    <span class="fa" [ngClass]="{'image-icon': !claim.category.value }"
                      aria-hidden="true"></span>
                  </div>
                </li>

                </ng-container>
              </ul>
            </div>
            <div class="alert-section">
              <assisted-moment [assistData]="assistedMoment" sectionName="OtherRequirements"></assisted-moment>
            </div>
          </aside>

      </div>
    </div>
真实图像

将父容器放在一旁
位置:相对

        <div class="row">
          <aside class="col-lg-4 mt-5">
            <div class="claims-side-panel">
              <ul>
                <li>
                  <div class="claim-list-item">
                    <span class="fa" [ngClass]="{'image-icon': !claim.category.value }"
                      aria-hidden="true"></span>
                  </div>
                </li>

                </ng-container>
              </ul>
            </div>
            <div class="alert-section">
              <assisted-moment [assistData]="assistedMoment" sectionName="OtherRequirements"></assisted-moment>
            </div>
          </aside>

      </div>
    </div>
aside{
position:relative
}

“位置固定”会干扰整个css,因为它本身的属性为“固定”,所以我需要给出宽度和边距,这解决了我的问题

请您使用渲染的HTML创建一个,当我将“位置固定”添加到其他div时,它的宽度会受到干扰。就像我粘贴的图像一样,如果你看到的话,图像的宽度缩小固定位置通常围绕内容包裹元素宽度假定内容文本的宽度加上任何填充或边距。可以使用left和right的position属性来调整left?的widthposition属性?我通过提供宽度修正了这个问题,但它没有响应性
        <div class="row">
          <aside class="col-lg-4 mt-5">
            <div class="claims-side-panel">
              <ul>
                <li>
                  <div class="claim-list-item">
                    <span class="fa" [ngClass]="{'image-icon': !claim.category.value }"
                      aria-hidden="true"></span>
                  </div>
                </li>

                </ng-container>
              </ul>
            </div>
            <div class="alert-section">
              <assisted-moment [assistData]="assistedMoment" sectionName="OtherRequirements"></assisted-moment>
            </div>
          </aside>

      </div>
    </div>