我的div是固定的，但是当我打开一个对话框（弹出窗口时，div不再固定）

Question

我有一个div通知，它在固定位置，您可以在第一个屏幕上看到它。问题是，当我通过单击“更新”或“删除”按钮打开对话框时，在弹出窗口（对话框）打开时div通知不再固定。如何解决此问题，当我打开对话框div时要保持相同的固定位置。

.list {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 3%;
  display: flex;
}

.content {
  width: 100%;
  margin-left: 22%;
}

table {
  width: 100%;
}

img {
  height: 140px;
  width: 100px;
  margin-top: 5%;
  margin-bottom: 5%;
}

.update {
  color: grey;
}

.notifications {
  width: 16%;
  position: fixed;
  text-align: center;
  border-radius: 10px;
  -webkit-box-shadow: 9px 9px 18px 3px rgba(163,158,163,1);
  -moz-box-shadow: 9px 9px 18px 3px rgba(163,158,163,1);
  box-shadow: 9px 9px 18px 3px rgba(163,158,163,1);
}

<div class="list">
  <div class="notifications">
    <h2>Tv Shows List</h2>
    <h4 class="number"><span class="badge badge-danger">Tv Shows Finished : {{ tvShowsFinished }} </span></h4>
    <h4 class="number"><span class="badge badge-primary">Tv Shows Waiting : {{ tvShowsWaiting }} </span></h4>
    <h4 class="number"><span class="badge badge-warning">Tv Shows Watching : {{ tvShowsWatching }} </span></h4>
  </div>
  <div class="mat-elevation-z8 content">
    <table mat-table [dataSource]="dataSource">
  
      <ng-container matColumnDef="poster">
        <th mat-header-cell *matHeaderCellDef> Poster</th>
        <td mat-cell *matCellDef="let element">
          <div *ngIf="element.poster_path; else noPoster">
            <img src="https://image.tmdb.org/t/p/w200/{{element.poster_path}}" alt="...">
          </div>
          <ng-template #noPoster>
            <img src="../../assets/not_found.jpg" alt="...">
          </ng-template>
        </td>
      </ng-container>
  
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Title </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
  
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> Status </th>
        <td mat-cell *matCellDef="let element" > 
          <div *ngIf="element.status === 0">
            <h5><span class="badge badge-secondary">Never finished</span></h5>
          </div>
          <div *ngIf="element.status === 1">
            <h5><span class="badge badge-danger">Finished</span></h5>
          </div>
          <div *ngIf="element.status === 2">
            <h5><span class="badge badge-primary">Waiting for season/episode</span></h5>
          </div>
          <div *ngIf="element.status === 3">
            <h5><span class="badge badge-warning">Watching</span></h5>
          </div>
        </td>
      </ng-container>
  
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let element"> {{element.first_air_date | date: 'dd MMMM, y'}} </td>
      </ng-container>
  
      <ng-container matColumnDef="vote">
          <th mat-header-cell *matHeaderCellDef> Vote </th>
          <td mat-cell *matCellDef="let element"> {{element.vote_average}} </td>
        </ng-container>
  
      <ng-container matColumnDef="update">
          <th mat-header-cell *matHeaderCellDef> Update </th>
          <td mat-cell *matCellDef="let element">
            <button mat-icon-button class="update" (click)="update(element)">
              <mat-icon>create</mat-icon>
            </button>
          </td>
        </ng-container>
  
  
      <ng-container matColumnDef="remove">
        <th mat-header-cell *matHeaderCellDef> Remove </th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button color="warn" (click)="remove(element)">
            <mat-icon>delete</mat-icon>
          </button>
        </td>
      </ng-container>
  
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  
    <mat-paginator [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons></mat-paginator>
  </div>
</div>

如果您有解决此问题的想法，我会很高兴。

谢谢

Answer 1

您可以在加载通知时尝试通过JavaScript发出margin-top: 10%;。 10％只是一个假设，您可以将其更改为您认为合适的任何值。