CSHTML中用position和z-index实现文字叠图片失效，求排查错误

问题概述 #

使用CSHTML开发，需要让文字显示在图片前方但未实现；通过第三方商用工具生成内容，先排查自身操作错误。当前出现的问题：

• 标题位于图片下方
• 图片未按设置的550px×770px显示，仅为约2×2厘米的正方形
• 文字容器的边框未显示，无法确定父div的位置

代码示例 #

HTML代码 #

<div id="cover-img-content">
    <img src="images/Cover.png" style="width: 100%; height: 100%; object-fit: contain"/>
    <div class="cover-page-text">
        <h1>TITLE</h1> 
    </div>
</div>

CSS代码 #

#cover-img-content { 
position: relative; 
width: 550px;
height: 770px;
z-index: -1;
}

.cover-page-text {
top: 20%; 
left: 10%; 
position: absolute;
box-sizing: border-box;
border: 5px dotted black; 
z-index: 1;
}

常见错误排查点 #

• 父容器z-index设置错误：父容器#cover-img-content设置了z-index: -1，会让整个父容器（包含内部的图片和文字）处于页面所有默认层级元素的下方，即使子元素设置更高的z-index也无法突破父容器的层级限制，导致文字被压在图片或其他页面内容下方。
• 图片路径无效：images/Cover.png如果路径不正确，浏览器无法加载图片，会显示默认的小尺寸占位符，这也会导致视觉上图片尺寸异常。
• 样式被外部规则覆盖：如果页面存在其他CSS规则，可能覆盖了当前样式，比如父容器的宽高被!important规则修改，或者文字容器的position属性被重置为静态定位。
• 第三方工具样式解析问题：工具可能未正确支持position: relative/absolute嵌套、z-index、border或object-fit这些属性，导致样式未生效。

修复建议 #

1. 调整父容器z-index：移除#cover-img-content的z-index: -1，或者设置为0及以上数值，确保子元素的z-index能正常生效，让文字覆盖在图片上方。
2. 验证图片路径：确认images/Cover.png路径正确，工具能访问到该图片；可改用绝对路径测试，排除路径问题。
3. 简化代码测试：保留最基础的结构和样式（仅父div、img、文字div，以及必要的定位、宽高样式），用工具生成后查看效果，排除复杂样式的干扰。
4. 定位工具问题：如果简化代码后仍出现异常，可确定是第三方工具对CSS/HTML的解析存在问题，需要联系工具支持或更换工具测试。

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