如何让图片覆盖div容器？footer改为fixed后失效问题

问题根源是fixed定位元素的默认堆叠层级高于absolute元素——你把footer的position从absolute改成fixed后，footer的堆叠优先级提升，原本能覆盖它的.light图片被压在了下方。

直接给.light元素添加z-index属性，设置一个足够大的正数值即可解决：

.light {
    position: absolute;
    top: 97.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    margin-left: -10px;
    opacity: 0;
    z-index: 10; /* 新增：让图片堆叠层级高于footer */
}

如果之后你给footer也设置了z-index，只要保证.light的z-index数值比footer的大就行。

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