Html 在ngFor列表中，将一个图像置于另一个图像之下

我有一个元素列表（图像），看起来像4x4网格（数组的长度是16，所以我有16个图像）

我现在有这样的观点：

接下来，我将放置另一个图像（另一个网格-网格2），其中的每个元素将完全覆盖第一个网格中的每个图像

我找到了我需要的这个解决方案，但我不能从角度正确地实现它——我经常使用CSS，但每次都不起作用

所以，本质上，它应该是

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="img" class="tn">
    <img  [src]="img2" class="secondImg">
  </li>
</ul>

---

你能帮我调整CSS吗？另外，我不需要像

这样的动态条件绑定，但我需要正好两个图像，一个在另一个上，首先，您的角度代码应该如下所示：

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="key" class="tn">
  </li>
</ul>

---

以下方面应起作用：

ul { padding:0; width:780px; margin:20px auto}
li { 
  display:inline-block;
  position: relative;
}

li, li img {
  width: 191px;
  height: 146px;
}

.tn, .secondImg {
  position: absolute;
  margin:2px 2px;
  box-shadow:#999 1px 1px 3px 1px;
  cursor: pointer;
}

图像绝对位于

li

中，因此它们位于彼此的顶部

您可以在此处看到StackBlitz：

如果要控制位于顶部的属性，可以将z索引属性添加到

.tn

或

.secondImage

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="key" class="tn">
  </li>
</ul>

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="img" class="tn">
  </li>
</ul>

class row
      Class col-md-12
      class col-md-12

ul { padding:0; width:780px; margin:20px auto}
li { 
  display:inline-block;
  position: relative;
}

li, li img {
  width: 191px;
  height: 146px;
}

.tn, .secondImg {
  position: absolute;
  margin:2px 2px;
  box-shadow:#999 1px 1px 3px 1px;
  cursor: pointer;
}