HTML中SVG图片层级设置问题：z-index属性无法生效

问题核心：z-index仅对非static定位的元素生效。你的#phone SVG默认是position: static，所以设置的z-index不会生效，而两个img是absolute定位，优先级高于static元素，导致SVG被覆盖。

修复方案 #

给#phone添加非static定位（比如relative），保留原有z-index即可：

#phone {
    position: relative; /* 新增这一行 */
    z-index: 20;
}

原理说明 #

父容器.illustration-box-top已经设置了position: relative，给SVG添加position: relative后，它会纳入z-index的层级计算体系，此时z-index:20会高于两个img的z-index值（19、18），就能确保SVG显示在最上方，无需调整HTML元素的顺序。

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