CSS实现带背景图父Div与子Div的层叠及垂直居中布局

问题描述 #

我需要实现附图中的布局：一个带有背景图的容器.image-background-div，内部的子容器.front-container-div（对应图中棕色区域）要覆盖在父容器上方。但现有代码无法实现这个效果，请求帮忙完成布局。

原始代码 #

CSS

.image-background-div {
    background-image: url('../images/resource_background.jpg');
    background-size: contain;
}
.front-container-div {
    top: -30px
}

HTML

<div class="image-background-div">
   <div class="front-container-div">
         <h3>Title</h3>
         <p>Paragraph blocks</p>
         <div class="3-column-container">
            <div class="column-1">Column1</div>
            <div class="column-2">Column2</div>
            <div class="column-3">Column3</div>
         </div> 
   </div>
</div>

解决方案 #

你当前代码里.front-container-div的top: -30px不生效，核心原因是没设置定位属性，同时父容器缺少必要的布局支撑。以下是修改后的完整代码：

修改后的CSS

.image-background-div {
    background-image: url('../images/resource_background.jpg');
    background-size: cover; /* 替换contain，保证背景图铺满容器，避免留白 */
    background-position: center; /* 背景图居中显示 */
    min-height: 400px; /* 设置最小高度，确保背景容器有足够显示空间 */
    position: relative; /* 为子元素绝对定位提供参考上下文 */
    padding-bottom: 60px; /* 预留空间，防止子容器偏移后完全遮挡背景图底部 */
}

.front-container-div {
    position: absolute; /* 开启绝对定位，才能使用top/left等偏移属性 */
    top: -30px; /* 向上偏移30px，覆盖到父容器上方 */
    left: 50%; /* 水平居中基础设置 */
    transform: translateX(-50%); /* 配合left:50%实现精准水平居中 */
    width: 90%; /* 限制子容器宽度，避免过宽 */
    background-color: #8B4513; /* 模拟图中棕色背景，可按需调整 */
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 可选：添加阴影增强层次感 */
}

/* 三列布局基础样式（可选） */
.3-column-container {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.3-column-container > div {
    flex: 1;
    padding: 1rem;
    background-color: rgba(255,255,255,0.8);
}

关键说明

• 父容器.image-background-div设置position: relative，让子元素的绝对定位以它为基准，而非整个页面。
• 子容器.front-container-div必须设置position: absolute，才能通过top: -30px实现向上偏移覆盖父容器的效果。
• 采用left: 50% + transform: translateX(-50%)实现子容器水平居中，适配各种屏幕宽度。
• min-height保证背景容器不会因为内容过少而收缩，padding-bottom避免子容器完全遮挡背景图底部区域。

HTML部分无需修改，保持原有结构即可。

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