为什么div设置的inset内阴影没有显示在内部img图片的上方？

问题原因 #

inset 内阴影默认绘制在容器的背景层上方、内容层下方，你的 <img> 属于容器的内容节点，所以默认会直接覆盖住内阴影。你之前给img设置z-index: -1的思路是对的，但父容器设置了z-index: 2形成了独立层叠上下文，负z-index的子元素会被放到容器本身的下方，可能出现img被页面其他元素遮挡的问题。

解决方案 #

方案1：用伪元素叠加内阴影（最稳妥，无兼容问题） #

不用改现有HTML结构，只需要调整CSS即可：

.img-container {
    position: relative;
    margin: auto 0;
    max-width: 100%;
    /* 不需要额外设置z-index和固定高度，容器会自动适配图片尺寸 */
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 不需要给img设置position和z-index */
}

/* 新增伪元素作为内阴影层 */
.img-container::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 0 25px red inset;
    /* 避免阴影层遮挡图片的点击、拖拽等交互事件 */
    pointer-events: none;
}

方案2：调整层级实现（代码更简洁） #

如果不想新增伪元素，可以调整层级规则实现：

.img-container {
    position: relative;
    margin: auto 0;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 25px red inset;
    background: transparent;
    /* 移除父容器的z-index设置，避免形成独立层叠上下文 */
}

.img-container img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

这个方案需要确保父容器外层没有和负z-index元素冲突的层级设置，即可正常显示。

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