本文介绍如何通过 css grid 替代错误的绝对定位方案，实现两个子容器按比例（如 50% 宽度）布局，并让右侧容器的前 20% 隐藏于左侧容器之下，同时确保内部图片严格贴合容器、不溢出。
本文介绍如何通过 css grid 替代错误的绝对定位方案，实现两个子容器按比例（如 50% 宽度）布局，并让右侧容器的前 20% 隐藏于左侧容器之下，同时确保内部图片严格贴合容器、不溢出。
原始代码中尝试用 position: absolute + left: 30% 控制 .second-child 的偏移，但存在根本性问题：.parent 使用了 display: flex，而绝对定位子元素会脱离 Flex 布局流，导致 flex 相关属性失效；同时未设置父容器 position: relative，使 left: 30% 缺乏参考基准，最终图像因尺寸计算混乱而溢出。
更稳健、语义清晰且易于维护的解法是采用 CSS Grid。它天然支持精确列划分与层叠控制，无需依赖易出错的绝对定位。以下为推荐实现：
.parent {
width: 100%;
height: 70vh;
display: grid;
/* 将宽度划分为 10 等份：左侧占 5 份（50%），重叠区占 2 份（20%），右侧可见区占 3 份（30%） */
grid-template-columns: 5fr 2fr 3fr;
position: relative; /* 为后续 z-index 提供堆叠上下文 */
}
.first-child {
grid-column: 1 / span 2; /* 占据前 5fr + 2fr = 7fr 中的前 5fr，即 50% 宽度 */
height: 100%;
background-color: pink;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
z-index: 2; /* 确保在 .second-child 之上 */
}
.second-child {
grid-column: 2 / span 2; /* 起始于第 2 栏（即重叠区起始），横跨 2 栏 → 覆盖中间 2fr + 右侧 3fr 共 5fr，其中前 2fr 被 .first-child 遮挡 */
height: 100%;
overflow: hidden; /* 关键：隐藏超出部分 */
z-index: 1;
}
.second-child img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 推荐：保持宽高比的同时填满容器，避免拉伸变形 */
/* 若需顶部对齐可加：object-position: top; */
}
对应 HTML 结构（修正原代码中的标签闭合错误）：
<section class="parent"><div class="first-child">
<form><!-- 表单内容 --></form>
</div>
<div class="second-child">
@@##@@
</div>
</section>
✅ 关键要点总结：
- 避免滥用 position: absolute：在 Flex 容器中混合绝对定位极易破坏布局逻辑；Grid 或相对定位 + z-index 更可控。
- overflow: hidden 必不可少：仅靠 width/height: 100% 无法约束图片溢出，必须配合容器裁剪。
- object-fit: cover 是图像适配最佳实践：相比单纯 width:100%;height:100%，它能保持图像比例并智能裁剪，防止畸变。
- 栅格列数设计要服务于视觉目标：本例用 5fr 2fr 3fr 明确表达「50% 主体 + 20% 重叠 + 30% 可见」的布局意图，语义清晰、响应友好。
该方案已在现代浏览器中稳定运行，无需额外 polyfill，兼顾可维护性与视觉精度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
