html - 滚动时 Div 越过标题栏

Question

我试图有一个固定的标题栏，当你滚动时，页面的内容需要在标题栏下方而不是显示在上方。它适用于多个页面，但不适用于我的日历页面。
这是滚动时发生的情况:

在其他页面上，页面内容将位于标题栏下方，但在这里不起作用。
这是我的标题栏的 html 和 css:

<div class="headerclass">
  <nz-header class="header-bar">
    <a
      role="button"
      (click)="toggleHidden()"
      [hidden]="false"
      class="home"
      id="menuButton"
    >
      <img
        src="../../../assets/images/baseline_menu_white_48dp.png"
        alt="Logo SafeSpace"
        widht="55px;"
        height="55px;"
        id="menu"
      />
    </a>
    <a role="button" routerLink="/Home" routerLinkActive="active">
      <img
        src="../../../assets/images/logo.png"
        alt="Logo SafeSpace"
        widht="55px;"
        height="55px;"
        id="logo"
      />
    </a>
    <img
      src="../../../assets/images/face-white-18dp.svg"
      alt="User logo"
      widht="45px;"
      height="45px;"
      id="face"
    />
    <img
      src="../../../assets/images/settings-white-18dp.svg"
      alt="Settings logo"
      widht="45px;"
      height="45px;"
      id="settings"
    />
    <a role="button" (click)="logout()" id="logout">
      <img
        src="../../../assets/images/exit_to_app-white-18dp.svg"
        alt="Logout logo"
        widht="45px;"
        height="45px;"
      />
    </a>
  </nz-header>
  <!--dropdownMenu-->
  <div class="menu">
    <ul nz-menu nzMode="inline" [hidden]="isHidden" class="menulist">
      <li nz-submenu nzTitle="Registreren">
        <ul>
          <li
            nz-menu-item
            role="button"
            id="RegisterChildMenu"
            (click)="registerChild()"
          >
            Registreer een kind
          </li>
          <li
            nz-menu-item
            role="button"
            id="RegisterSupervisorMenu"
            (click)="registerSupervisor()"
          >
            Registreer een begeleider
          </li>
        </ul>
      </li>
      <li nz-menu-item role="button" id="CalendarMenu" (click)="calendar()">
        <span>Kalender</span>
      </li>
      <li nz-menu-item role="button" (click)="export()" id="export">
        <span>Exporteren</span>
      </li>
    </ul>
  </div>
</div>

/* for smaller screen*/
@media screen and (min-width: 800px) {
  #menuButton {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  #logo {
    display: none;
  }
}

/* ANT DESIGN */
nz-header,
nz-footer {
  background: #7dbcea;
  color: #fff;
  width: 100%;
  position: relative;
  z-index: 1;
  top: 0;
}

.headerclass {
  position: fixed;
  width: 100%;
  z-index: 1;
}

如您所见，我正在使用 z-index。我用错了吗？
这是我的日历代码:

<div class="calendar">
  <nz-calendar (nzPanelChange)="panelChange($event)" (nzSelectChange)="selectChange($event)">
    <ul *nzDateCell="let date" class="events">
      <ng-container [ngSwitch]="date.getDate()">
        <li *ngFor="let day of appointments">
          <ng-container *ngSwitchCase="getDayFromDate(day.start)">
            <button nz-button nzType="text" 
            (click)="onAppointmentClicked(day.appointmentId)">{{day.child.userName}}</button>            
          </ng-container>
        </li>
      </ng-container>
    </ul>
  </nz-calendar>
  <nz-modal [(nzVisible)]="isVisible" nzTitle="Details afspraak" [nzFooter]="modalFooter" id="calendarDetail">                
    <app-appointment-details *ngIf="loadDetails" [appointment]="selectedAppointment"></app-appointment-details>
    <ng-template #modalFooter>
      <button nz-button nzType="primary" (click)="handleOk()">Ok</button>
    </ng-template>
 </nz-modal>
</div>

.calendar {
  margin-left: 2%;
  margin-right: 2%;
  padding-top: 75px;
  z-index: 2;
}

为此，我正在使用 ng-zorro 库。
有谁知道我该如何解决这个问题？

Answer 1

您已输入 calendar's z-index 大于 headerclass让我们试着了解一下 z-index做？ z-index 的较高值意味着更高的地位。
所以在你的情况下，

   nz-header,
nz-footer {
  background: #7dbcea;
  color: #fff;
  width: 100%;
  position: relative;
  z-index: 2;
  top: 0;
}

.headerclass {
  position: fixed;
  width: 100%;
  z-index: 2;
}
 .calendar {
  margin-left: 2%;
  margin-right: 2%;
  padding-top: 75px;
  z-index: 1;
  }

这将解决您的问题。干杯!