使用垫卡时无法使用绝对/相对位置答案

【问题标题】：Unable to play with absolute/relative position while using Mat Cards使用垫卡时无法使用绝对/相对位置
【发布时间】：2020-01-18 18:55:18
【问题描述】：

考虑这个简单的代码：

<mat-card>
  <app-a></app-a>
</mat-card>
<mat-card>
  <app-b></app-b>
</mat-card>

组件A：

<div>
  I dont want this div behind blue blocks but in front of them
</div>
div {
  width: 320px;
  cursor: default;
  position: relative;
  background: green;
  top: 60px;
}

组件B：

<div *ngFor="let row of [0, 0, 0, 0, 0, 0, 0, 0, 0]" class="div"></div>
div {
  height: 50px;
  background: blue;
  margin-bottom: 10px;
}

我无法在组件 B 前面制作组件 A。

用 div 代替 mat-card 就可以了，看看这个 sn-p：

.container {
  height: 100px;
  background: pink;
}

.absolute {
  position: absolute;
  top: 100px;
  height: 100px;
  background: green;
}

.any {
  background: blue;
  height: 500px;
}

<div class="container">
  <div class="absolute">
    in front of blue div
  </div>
</div>
<div class="container">
  <div class="any"></div>
 </div>

因为示例比代码好得多，所以我做了一个堆栈闪电战： https://stackblitz.com/edit/angular-ysrymo

顶部（第一个示例）带有材料卡，绿色元素在后面
底部（第二个示例）与 div 相同，绿色元素在前面

我希望在使用材料卡时绿色元素位于蓝绿色之前，但在尝试了一些事情后我仍然无法解决这个问题。

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

你可以试试这个

在组件中提供 z-index。

原因：Material 组件构建的 cdk-overlay 的 z-index = 1000，因此您需要提供大于 1000 的 z-index

a.component.html

<div style="z-index:1001">
  I dont want this div behind blue blocks but in front of them
</div>

工作链接

https://stackblitz.com/edit/angular-6de5k9

【讨论】：