Position Fixed inside tab content in angular material2 是相对于标签而不是 window 定位的

Question

所以我使用 angular material2 来创建标签。当我创建一个固定位置的 div 元素时，在任何选项卡内容中，该元素相对于选项卡内容的范围定位自身 as if that's the entire window.

如果我继续减少顶部，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;
   }

Position Fixed inside tab content in angular material2 是相对于标签而不是 window 定位的

Position Fixed inside tab content in angular material2 is positioning with respect to tabs and not window

css

angular-material2