在ngFor list Angular中将一个图像放在另一个图像下

Question

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

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

这是我的CSS：

ul { padding:0; width:780px; margin:20px auto}
li { display:inline;}
.tn{
  margin:2px 2px;
  box-shadow:#999 1px 1px 3px 1px;
  cursor: pointer;
  width: 191px;
  height: 146px;

}

我现在有这个观点：

接下来，我想放置另一个图像（另一个Grid - Grid 2），每个元素将从第一个Grid完全覆盖每个图像。

我找到了我需要的解决方案http://jsfiddle.net/uS7nw/2/但是我无法在Angular中实现它 - 我用CSS玩了很多，但每次都不起作用。

所以，基本上，它应该看起来像

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

你能帮我调整一下CSS吗？ PS。我不需要动态条件绑定，如<img [src]="option == true? img : img2">，但我需要一个在另一个

之上的2个图像

Answer 1

以下内容应该有效：

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：https://stackblitz.com/edit/angular-dykmxm?file=src%2Fapp%2Fapp.component.css

如果您想控制哪一个位于顶部，可以将z-index属性添加到.tn或.secondImage

Answer 2

首先，您的角度代码应该是这样的：

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

如果你想要两个图像，一个在另一个上面，你可以使用bootstrap模板

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