当父容器未设置相对定位时，绝对定位子元素的 width: 100% 会相对于初始包含块（如视口）计算，而非父元素；解决方法是为父容器显式添加 position: relative，使其成为子元素的定位上下文。
当父容器未设置相对定位时，绝对定位子元素的 `width: 100%` 会相对于初始包含块（如视口）计算，而非父元素；解决方法是为父容器显式添加 `position: relative`，使其成为子元素的定位上下文。
在 CSS 布局中，width: 100% 和 width: inherit 的行为高度依赖于包含块（containing block） 的定义。对于绝对定位元素（即 position: absolute），其百分比宽度默认参考的是最近的已定位祖先元素（position ≠ static）的尺寸；若不存在这样的祖先，则回退到初始包含块（通常是视口），这正是问题中 #logo-holder 宽度异常的根本原因。
在你的原始代码中，#main-pic 缺少 position: relative，因此其子元素 #logo-holder 的 width: 100% 实际上是相对于整个浏览器窗口宽度计算的，而非 #main-pic 的 40% 宽度——导致它远宽于图片。而 width: inherit 则继承父元素的 computed width 值（此处为 auto，因未显式设置且非块级替换元素），结果不可控，进一步加剧偏差。
✅ 正确做法是：为 #main-pic 添加 position: relative。这不会改变其文档流位置，但将其确立为 #logo-holder 的定位上下文（containing block），使 width: 100% 精确匹配 #main-pic 的实际渲染宽度。
以下是修正后的完整 CSS 示例：
body {
display: flex;
}
#main-pic {
width: 40%;
height: 700px;
position: relative; /* ✅ 关键：创建定位上下文 */
}
#main-pic > img {
width: 100%;
height: 100%;
display: block; /* 推荐：避免图片下方默认空白间隙 */
}
#logo-holder {
width: 100%; /* ✅ 现在 100% 指 #main-pic 的宽度 */
height: 100px;
background-color: brown;
position: absolute;
top: 50%;
transform: translateY(-50%); /* ✅ 更精准的垂直居中（替代仅靠 top） */
}
? 注意事项：
-
position: relative是“无副作用”的安全选择：它保持元素在文档流中的原始位置，仅启用其作为定位上下文的能力； - 若需水平居中
#logo-holder，可补充left: 50%; transform: translateX(-50%);； - 避免对
img使用vertical-align: bottom或包裹div来清除基线间隙，直接设display: block更简洁； - 在响应式场景中，建议配合
max-width和aspect-ratio保障图像比例稳定。
通过明确建立定位上下文，你就能可靠地实现侧边栏、水印、覆盖按钮等与媒体内容严格对齐的 UI 组件。
