Question

我正在使用角度素材标签。我的代码如下所示：

<md-tab-group>
    <md-tab style="position: fixed;top:0;" label={{category}} *ngFor="let category of itemCategory">
    </md-tab>
</md-tab-group>

和css就是：

.q-header {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 0px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    align-items: center;
    padding-left: 10px;
    z-index: 100000000;
    /*justify-content: center;*/
    color: white;
    background-color: #42AB9E;
}

但不知何故，标签在滚动时不会保持固定状态。我怎样才能做到这一点？

Answer 1

<强> 1。使用:: ng-deep。

使用/ deep / shadow-penetcing后代组合器强制样式通过子组件树进入所有子组件观点。 / deep / combinator适用于任何深度的嵌套组件，它适用于视图子节点和内容子节点零件。使用/ deep /，＆gt;＆gt;＆gt;和:: ng-deep仅限于模拟视图封装。模拟是默认和最常用的视图封装。有关更多信息，请参阅控制视图封装部分。穿阴影的后代组合是已弃用并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃Angular中的支持（对于所有3个/ deep /，＆gt;＆gt;＆gt; 和:: ng-deep）。在那之前:: ng-deep应该是更广泛的首选与工具的兼容性。

<强> CSS ：

::ng-deep .mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed;
}

<强> DEMO

<强> 2。使用ViewEncapsulation

...组件CSS样式被封装到组件的视图中并且不会影响应用程序的其余部分。要控制这个怎么样封装发生在每个组件的基础上，您可以设置视图组件元数据中的封装模式。选择以下模式：....无意味着Angular没有视图封装。 Angular将CSS添加到全局样式中。范围界定前面讨论的规则，隔离和保护不适用。这个与将组件的样式粘贴到其中的基本相同 HTML。

您无需设置材料样式零件。

<强> Typscript：

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })

<强> CSS

.mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed;
}

DEMO

第3。在style.css中设置样式

这次你必须“强迫”＃39;样式与！important。

的style.css

.mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed  !important;
}

DEMO

滚动时，md-tab-group内的md-tabs不会保持固定状态

1 个答案: