切换为CSS Grid布局后背景图片溢出容器问题排查求助

• 背景图定位基准错误：.textBackground 设置了 position: absolute，但它的父容器 .bodyHead、.body2 未设置 position: relative，导致两个背景图都以设置了position: relative的全局body作为定位基准，第一个容器的背景图自然会溢出到下方区域，第二个容器的背景图刚好位置匹配所以看起来显示正常。
• HTML结构不规范：背景图<img class="BackgroundImage">写在了<head>结束标签和<header>之间，所有页面可视内容必须放在<body>标签内部，不符合规范的结构也会导致布局渲染异常。
• 样式属性误用：header的定位属性重复声明，先写了position: sticky后写position: relative，后者会覆盖前者；.headerGrid上的grid-column、grid-row属性是用来定义网格项的位置，不是网格容器的行列配置，属性名写错导致网格布局未按预期生效。

• 给所有包含.textBackground的父容器加上相对定位：给.bodyHead、.body2添加CSS规则position: relative;，让内部的绝对定位背景图以父容器为基准定位，不会溢出到其他区域。
• 修正HTML结构：把<img class="BackgroundImage">移动到<body>标签内部，作为body的第一个子元素即可。
• 修正错误的样式属性：删除header中重复的定位属性保留需要的；把.headerGrid上的grid-column: 1fr 1fr 1fr;改成grid-template-columns: 1fr 1fr 1fr 1fr 1fr;（因为你的grid-template-areas每行列了5个区域），grid-row: 1fr 1fr;改成grid-template-rows: 1fr 1fr;。
• 可选优化：如果只是要给容器加背景图，更推荐直接给容器设置background-image属性，不需要额外插入img标签，减少DOM节点同时避免定位问题。

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