【问题标题】:Trying to add position fix for div尝试为 div 添加位置修复
【发布时间】:2018-12-31 01:02:41
【问题描述】:

我有两个 div claims-side-panelalert-section。我需要为claims-side-panel 添加position:fixed,以便它可以滚动移动。但是如果我添加position:fixed 那么它会干扰其他 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>

CSS

div.claims-main-wrapper {
  .fa-spinner {
    @include font-size(40px);
    position: absolute;
    margin: 60px auto; 

    left: 50%;
  }
  aside {
    .claims-side-panel {
      position: fixed; // here I am trying

      ul {
        padding-left: 0px;
        list-style: none;
        li {
          .claim-list-item {
            padding: 14px 28px;
            background-color: $main-background-color;
            border-bottom: 1px solid #e0e0e0;
            line-height: 26px;
            span {
              &.label {
                @include font-size(16px);
                @include font-style($tertiaryFontFamily, 700);
                color: $text-color;
              }

            p {
              @include font-size(16px);
              font-family: $primaryFontFamily;
              color: $text-color5;
              margin: -4px 0 0 28px;
              word-break: break-word;
            }
          }
        }
      }
    }
  }
  div.alert-section {
    //padding-top: 2rem;
    padding-top: 0;
    .table thead th {
      border-bottom: 1px solid $border-color;
    }
    .table th, .table td {
      border-top: 0;
    }

  }

实际图像

【问题讨论】:

标签: html css sass bootstrap-4


【解决方案1】:

位置固定扰乱了整个 CSS,因为它自己的属性是固定的,所以我需要给出,所以我需要给出宽度和边距,这解决了我的问题

【讨论】:

    【解决方案2】:

    把父容器放在一边position:relative

    aside{
    position:relative
    }
    

    【讨论】:

    • 为什么当我将位置固定添加到其他 div 时它的宽度会受到干扰。就像我粘贴的图像,如果你看到,图像的宽度减小了
    • 固定位置通常将元素包裹在内容周围,宽度假定内容文本的宽度加上任何填充或边距。您可以使用左右的位置属性来调整宽度
    • 左边的位置属性?我通过给出宽度但它没有响应来解决这个问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-13
    • 1970-01-01
    • 2022-01-17
    • 2012-12-25
    • 2020-12-20
    相关资源
    最近更新 更多