Невозможно играть с абсолютной / относительной позицией при использовании карт мат

Question

Рассмотрим этот простой код:

<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;
}

Я не могу сделать компонент A перед компонент B.

С div вместо mat-card, он работает, посмотрите на этот фрагмент:

.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, зеленый элемент находится перед

Я хочу зеленый элемент должен быть перед сине-зеленым при использовании Материальных Карт, но после попытки некоторых вещей я все еще не могу это исправить.

Answer 1

Вы можете попробовать это

Предоставить z-индекс в компоненте.

Причина: Компоненты материала создают cdk-оверлей, который имеет z-index = 1000, поэтому вам нужно предоставить z-index больше 1000

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