Question

我正在尝试将图像固定在

上

 position: -webkit-sticky;
 position: sticky;
 top: 1px;

但是无法实现。

HTML:

<mat-tab-group class="user-tabs"
    (selectedTabChange)="changeUserTab($event)">
  <mat-tab label="Selectable Tasks">
    <mat-tab-group class="user-chats"
        (selectedTabChange)="changeChatTab($event)">
        <mat-tab *ngFor="let chat of userData.chats; let i = index;">
           <img>
        </mat-tab>
    </mat-tab-group>
  </mat-tab>
</mat-tab-group>

我在标签内有标签，是的。有人对此有解决方案吗？谢谢。

Answer 1

请尝试固定位置：如果需要，还添加z-index：999。

Answer 2

找到了一个原因-至少有一个父级将overflow设置为hidden，并且使用mat-tab时，这种情况就不会起作用。

Answer 3

这是一个解决方案：

 <mat-tab-group
      id="my-tab-group"
      mat-stretch-tabs
      [selectedIndex]="tab"
      (selectedIndexChange)="changeTab($event)"
    >
      <mat-tab>
        <custom-component-with-sticky-content></custom-component-with-sticky-content>
      </mat-tab>
      <mat-tab>
        <my-second-component></my-second-component>
      </mat-tab>
 </mat-tab-group>
 ...

和CSS：

 styles: [
     `
  /* Needed in order to allow the sticky content  */
  ::ng-deep #my-tab-group .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active {
    overflow: visible !important;
  }

  ::ng-deep #my-tab-group .mat-tab-body-wrapper {
    overflow: visible !important;
  }

  ::ng-deep #my-tab-group .mat-tab-body-wrapper .mat-tab-body-content {
    overflow: visible !important;
  }
`,
],

无法将物品粘在垫子标签内

3 个答案: