当父容器未设置相对定位时，width: 100% 或 inherit 对绝对定位子元素无效；需为父元素添加 position: relative，使其成为绝对定位的参考上下文，子元素才能正确继承其宽度。
当父容器未设置相对定位时，`width: 100%` 或 `inherit` 对绝对定位子元素无效；需为父元素添加 `position: relative`，使其成为绝对定位的参考上下文，子元素才能正确继承其宽度。
在 CSS 布局中，position: absolute 的元素会脱离文档流，并相对于最近的已定位（non-static）祖先元素进行定位。若祖先均未设置 position: relative/absolute/fixed/sticky，则默认回退到 （或初始包含块），此时 width: 100% 指的是视口宽度，而非你期望的父容器（如 #main-pic）宽度——这正是 #logo-holder 被拉伸至全屏、或 inherit 表现异常的根本原因。
✅ 正确解法是：为 #main-pic 显式声明 position: relative。它本身不改变布局位置（relative 的默认偏移为 0），但关键作用是创建一个新的定位上下文（containing block），使内部 position: absolute 元素（如 #logo-holder）的百分比宽高值以它为基准计算。
以下是修正后的完整代码示例：
body {
display: flex;
margin: 0; /* 避免 body 默认外边距干扰 */
}
#main-pic {
width: 40%;
height: 700px;
position: relative; /* ✅ 关键：启用子元素绝对定位的参考上下文 */
}
#main-pic > img {
width: 100%;
height: 100%;
display: block; /* 防止图片下方出现空白间隙 */
}
#logo-holder {
width: 100%; /* ✅ 现在 100% = #main-pic 的 40% 视口宽度 */
height: 100px;
background-color: brown;
position: absolute;
top: 50%;
transform: translateY(-50%); /* 推荐：更精准垂直居中，替代仅靠 top */
left: 0;
}
⚠️ 注意事项：
-
inherit在绝对定位子元素中行为不可靠，优先使用width: 100%+position: relative父容器； - 图片建议添加
display: block，避免行内元素默认基线对齐导致的底部空白； - 若需垂直居中，
top: 50% + transform: translateY(-50%)比单纯top: 50%更健壮（尤其当高度非固定时）； - 确保
#main-pic本身有明确宽高（如本例中width: 40%），否则100%将失去参照。
总结：CSS 绝对定位的尺寸计算依赖于“最近已定位祖先”，这不是隐式继承，而是显式上下文绑定。牢记「要控制绝对定位子元素的尺寸范围，先给父容器加 position: relative」——这是前端布局中一条高效且普适的实践原则。
