css - Position Fixed inside tab content in angular material2 是相对于选项卡而不是窗口定位的

Question

所以我使用 angular material2 来创建标签。当我创建一个位置固定的 div 元素时，在任何选项卡内容中，该元素相对于选项卡内容的范围定位自身 就好像那是整个窗口。

如果我继续减少顶部，div 会在选项卡内消失。通过检查我可以看到该元素，但无论我设置多高的 z-index 都不会显示在选项卡的表面之上。

 <md-tab label="Device Groups" style="min-width: 100px">


        <div style="position: fixed;top:-5%;left:40%;min-width: 20%;min-height: 30px;z-index:100000000000;background: red">

          </div>
</md-tab>

Answer 1

发生是因为 Angular Material 添加了变换属性。这样做是为了修复:

.mat-tab-body-content, .ng-trigger, .ng-trigger-translateTab, .mat-tab-list{
      transform: none !important;
   }

   .mat-tab-body-wrapper{
    overflow: inherit !important;
   }