求助：如何在Drupal 9中实现图片叠加在前一张之上的效果

你的CSS没生效的核心原因是：仅对img用transform移动，但父容器.views-field-user-picture仍保持flex布局的默认并排状态，后面的父容器会遮挡前面的图片，导致看不到叠加效果。以下是修正方案：

修正后的CSS代码 #

/* 保持flex布局用于横向排列图片容器 */
.block-views-blockgroup-subscribers-block-1 .view-content {
    display: flex;
    flex-direction: row;
}

/* 给每个图片容器设置相对定位，确保z-index生效 */
.block-views-blockgroup-subscribers-block-1 .views-field-user-picture {
    position: relative;
}

/* 从第二个图片容器开始，设置负margin实现左移叠加 */
.block-views-blockgroup-subscribers-block-1 .views-field-user-picture:not(:first-child) {
    margin-left: -18px; /* 数值根据图片大小调整，确保露出前一张的边框 */
    z-index: 1; /* 后面的图片层级更高，叠在前面的上方 */
}

/* 第一个图片层级最低，被后续图片叠加 */
.block-views-blockgroup-subscribers-block-1 .views-field-user-picture:first-child {
    z-index: 0;
}

/* 图片样式保持圆形和边框 */
.block-views-blockgroup-subscribers-block-1 .views-field-user-picture img {
    border: 2px solid #f7f9fa;
    border-radius: 50%;
}

关键调整说明 #

1. 父容器层级控制：给.views-field-user-picture设置position: relative和z-index，确保后面的图片容器能叠在前面的上方。
2. 负margin实现叠加：通过margin-left: -18px（可根据实际图片尺寸微调）让后续容器左移，覆盖在前一个容器的右侧区域。
3. 移除无效的transform：原代码的transform: translateX(-25%)仅移动图片本身，但父容器位置未变，会被后面的容器遮挡，所以改用父容器的margin来控制位置。

额外检查项 #

• 用浏览器开发者工具确认你的View块结构是否符合预期：每个用户图片都包裹在独立的.views-field-user-picture容器中。
• 如果堆叠效果还是不明显，可调整margin-left的数值，或给.view-content添加overflow: hidden（若需要限制容器宽度，避免堆叠后超出布局）。

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