如何将quote block覆盖在图片上，absolute定位偏移如何解决

问题根因 #

position: absolute 生效时，元素的定位基准是最近一个设置了非static定位（relative/absolute/fixed/sticky）的父级元素。你当前的代码里，引用块#quote-text的父级#accomplishments-section是默认的static定位，没有设置定位上下文，所以引用块会一直向上找基准，最终以整个视口/页面为基准定位，才会跑到页面顶部。

修复步骤 #

• 给引用块所属的父章节设置定位上下文：在CSS的#accomplishments-section规则中加一行position: relative，这样引用块的定位基准就会绑定到这个章节区域，不会超出章节范围乱跑。
• 修正引用块的居中偏移：你当前设置了left: 50%; top: 50%，这个坐标对应的是引用块的左上角位置，要让引用块整体居中在对应位置，需要加transform: translate(-50%, -50%)做偏移修正。
• 可选优化：如果要精确覆盖在左侧图片上方，建议将引用块和图片打包到同一个独立的相对定位容器内，避免受章节内其他元素（比如标题、段落）的位置影响。

修改后的核心代码示例 #

CSS修改部分

#accomplishments-section {
    background-color: rgb(151, 146, 140);
    padding: 50px;
    margin: -20px -5px -20px -20px;
    position: relative; /* 新增这行，设置定位上下文 */
}

#quote-text {
    background-color: rgb(182, 177, 170);
    padding: 30px;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 新增这行，修正居中偏移 */
    z-index: 10; /* 新增这行，确保引用块浮在图片上方不会被遮挡 */
}

如果要让引用块固定覆盖在左侧图片上，可调整HTML结构：

<section id="accomplishments-section">
    <h2>Notable Accomplishments</h2>
    <!-- 新增独立容器包裹图片和引用块 -->
    <div style="position: relative; width: fit-content;">
        <q id="quote-text"><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></q>
        <img id="left-picture"
            src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1200%2F1*BlFeXofPFQdHsxa8JWJZBg.jpeg&amp;f=1&amp;nofb=1"
            alt="" />
    </div>
    <!-- 其余段落内容保持不变 -->
</section>

调整后你可以直接修改#quote-text的top、left值来调整引用块在图片上的位置，不会再出现跑到页面顶部或者消失的问题。

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