单击选项卡菜单时显示选项卡内容，但显示在页面末尾

Question

单击选项卡菜单时显示选项卡内容，但该内容显示在页面末尾。

当前标签页内容显示在页面的末尾，但是当我单击标签页时，它会显示在标签页下。

ul {
  list-style: none;
  padding-left: 0;
}

.price {
  font-weight: bold;
  color: #777777;
}

.positive-amount {
  color: #77CE05;
}

.negative-amount {
  color: rgb(255, 0, 0);
}

h1 {
  padding-left: 0px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  font-weight: 500;
  margin-top: 6px;
  margin-bottom: 30px;
}

ul.accountList {
  &>li {
    //background-color: linear-gradient(#eee, white);
    background: linear-gradient(90deg, rgb(240, 240, 240), rgb(250, 250, 250));
    //transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    //transition: top 5s ease-in-out;
    cursor: pointer;
    position: relative;
    top: 0;
    padding: 2em;
    border-radius: 0.25em;
    margin: 1em 0;
    display: flex;
    justify-content: space-between;
    &>h2 {
      font-size: 1em;
      margin-bottom: 0;
      font-weight: 600 !important;
      &>small {
        font-size: 0.75em;
        color: #888888;
      }
    }
    &>ul.info {
      display: flex;
      align-items: center;
      &>li {
        display: inline;
      }
      &>li+li::before {
        content: '|';
        color: #aaa;
        padding: 0 0.5em;
      }
    }
    .highligted-text {
      color: blue;
    }
  }
  &>li.account-list {
    padding: 2em 2em 2em 2em;
  }
}

.table {
  background: linear-gradient(90deg, rgb(240, 240, 240), rgb(250, 250, 250));
  th {
    color: blue;
    border-top: 0;
    padding: 20px 0px 20px 15px;
    font-size: 1rem !important;
    text-align: left;
  }
  tbody tr {
    border-top: 1px solid #ddd;
    td {
      padding: 25px 0px 25px 15px;
      font-size: 1rem;
      border-top: 0;
      vertical-align: top;
      text-align: right;
    }
  }
}

.iconheader {
  width: 35px;
  height: 25px;
  cursor: pointer;
  float: right;
}

.table thead th {
  vertical-align: initial !important;
  text-transform: uppercase;
}

<ng-container *ngIf="accounts?.length > 0 && !accountsInfo.loading && !accountsInfo.error">
  <ul class="accountList">
    <li class="account-list" *ngFor="let account of accounts" (click)="accountSelection(account)">
      <h2>
        <span>{{account?.accountName}}</span>
        <br>
        <span class="display-4">{{account?.accountId | maskAccountno : true}}</span>
      </h2>
      <ul class="info">
        <li>Balance:
          <span class="price" *ngIf="account?.totalAccountValue > 0">+</span>
          <span class="price" *ngIf="account?.totalAccountValue < 0">-</span>
          <span class="price">{{account?.totalAccountValue | removeMinus | currency}}</span>
        </li>
      </ul>
    </li>
  </ul>
  <div class="transDetailsRecord">
    <table class="table" *ngIf="selectedAccount">
      <thead>
        <tr>
          <td colspan="12" class="border-0">
            <app-pagination [currentPage]="pagination.currentPage" [totalPages]="pagination.totalPages" [totalItems]="pagination.totalItems" [recordsPerPage]="pagination.recordsPerPage" [displyFrom]="pagination.displyFrom" [displyTo]="pagination.displyTo" (paginationClicked)="paginationTriggered($event)"></app-pagination>
          </td>
        </tr>
        <tr>
          <th>Acquisition Date</th>
          <th>Symbol/CUSIP</th>
          <th>Description</th>
          <th>Quantity</th>
          <th>Price($)</th>
          <th>Value($)</th>
          <th>Cost Basis($)</th>
          <th>Unit Cost($)</th>
          <th>Short Term G/L($) </th>
          <th>Long Term G/L($)</th>
          <th>Covered</th>
          <th>Average Cost Indicator</th>
          <!-- <th>
                            <img class="iconheader" title="Export CSV" (click)="download('text/csv')" src="./assets/images/export_CSV3.png" />
                        </th> -->
        </tr>
      </thead>
      <tbody>
        <tr *ngIf="transactionsInfo.loading || transactionsInfo.error || transactionsInfo.noData">
          <td colspan="12" class="text-center w-100" *ngIf="transactionsInfo.loading">
            <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
          </td>
          <td colspan="12" class="text-center w-100" *ngIf="transactionsInfo.error">
            <ngb-alert [dismissible]="false" type="danger">{{errorMessage}}</ngb-alert>
          </td>
          <td colspan="12" class="text-center w-100" *ngIf="transactionsInfo.noData">
            <ngb-alert [dismissible]="false" type="info">No transactions available</ngb-alert>
          </td>
        </tr>
        <ng-container *ngFor="let tran of unrealizedTransaction">
          <tr>
            <td class="highligted-text">{{tran.acquisitionDate | date : 'M/d/yy'}}</td>
            <td>{{tran.symbolcusip}}</td>
            <td>{{tran.description}}</td>
            <td>{{tran.quantity}}</td>
            <td>{{tran.purchaseCost | currency}}</td>
            <td>{{tran.soldValue | currency}}</td>
            <td [ngClass]="{'positive-amount': tran.purchaseCost >= 0, 'negative-amount': tran.purchaseCost < 0}">
              <span *ngIf="tran.purchaseCost >= 0">+</span>
              <span *ngIf="tran.purchaseCost < 0">-</span>
              <span>{{tran.purchaseCost | removeMinus | currency}}</span>
            </td>
            <td>{{tran.adjustedCost | currency}}</td>
            <td [ngClass]="{'positive-amount': tran.shortTermGainLoss >= 0, 'negative-amount': tran.shortTermGainLoss < 0}">
              <span *ngIf="tran.shortTermGainLoss > 0">+</span>
              <span *ngIf="tran.shortTermGainLoss < 0">-</span>
              <span>{{tran.shortTermGainLoss | currency}}</span>
            </td>
            <td>{{tran.longTermGainLoss | currency}}</td>
            <td>{{tran.covered}}</td>
            <td>{{tran.avgCostIndicator}}</td>
          </tr>

        </ng-container>
      </tbody>
    </table>
  </div>
</ng-container>
</div>