Angular中ngFor列表实现图片层叠显示的CSS调整求助

没问题，咱们来调整CSS实现两张图片的层叠显示，核心是利用定位属性让它们重叠，同时保留原来的4x4网格布局：

1. 调整<li>的样式 #

原来的li设置为display: inline，这种元素无法作为绝对定位元素的参考容器，所以我们要修改它的样式：

li {
  display: inline-block; /* 替换inline，保持横向排列同时支持块级特性 */
  position: relative;    /* 作为内部绝对定位元素的参考基准 */
  width: 191px;          /* 和图片宽度一致，确保网格对齐 */
  height: 146px;         /* 和图片高度一致 */
  margin: 2px 2px;       /* 保留原有的间距 */
}

2. 设置两张图片的层叠样式 #

给两张图片都添加绝对定位，让它们相对于父级<li>的左上角定位，实现完全重叠：

.tn, .secondImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 191px;
  height: 146px;
  box-shadow: #999 1px 1px 3px 1px;
  cursor: pointer;
}

/* 可选：如果需要让第二张图默认显示在上方，添加层级控制 */
.secondImg {
  z-index: 10;
}

3. 保留原有<ul>样式 #

你的<ul>样式可以基本不变，继续维持网格的整体布局：

ul {
  padding: 0;
  width: 780px;
  margin: 20px auto;
}

最终的Angular模板代码 #

直接用你期望的结构即可，无需额外修改：

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

生效逻辑说明 #

• position: relative给<li>创建了专属定位上下文，内部的绝对定位元素会以它为基准，而不是整个页面。
• inline-block让<li>既能横向排列成网格，又能拥有固定宽高，确保每个网格项大小统一，图片不会错位。
• 两张图片通过position: absolute + top/left:0实现完全重叠，z-index可以灵活控制显示层级。

内容的提问来源于stack exchange，提问作者Anna F