Блог

Я пытаюсь установить фиксированную панель заголовков, и при прокрутке содержимое страницы должно находиться под панелью заголовков и не отображаться выше. Это работает на нескольких страницах, но не работает для моей страницы календаря.

Это то, что происходит при прокрутке:

На других страницах содержимое страницы будет просто помещаться под панель заголовков, но здесь это не сработает. Это мой 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-индекс. Я использую это неправильно?
Это мой код для календаря:

 <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.
Кто-нибудь знает, как я могу это исправить?

Вы поместили calendar's z-индекс больше, чем 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;
  }
 

Это решило бы вашу проблему. Приветствия!

Требуется свойство z-index , определяющее уровень элемента. Попробуйте это:

 #navbar {
  background-color:#990000;
  position:fixed;  
  z-index:1; /*Add this*/
  width:100%;
  height:50px;
  text-align:center;
  vertical-align:middle;
  line-height:50px;
  top:0px;
}