如何用CSS实现商品盒子在背景图上并排叠加显示？

要实现商品盒子叠加在header背景图上且保持并排，核心是给包含商品的容器设置绝对定位，而非给每个商品盒子单独设置，具体修改如下：

1. 移除商品盒子的绝对定位 #

删除.catalog-item中的position:absolute; top:0;，恢复原本的inline-block布局，让商品盒子自然并排：

.catalog-item {
    width: 200px;
    height: 300px;
    background: linear-gradient(rgba(4, 65, 85, 0.5), #12688580);
    margin: 20px;
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    color: white;
    box-sizing: border-box;
    text-align: center;
    margin-top: 20px;
    box-shadow: 20px 10px 20px gray;
    border-radius: 15px;
    padding-bottom: 80px;
    display: inline-block;
    /* 移除该行：position: absolute; top:0; */
}

2. 给容器设置绝对定位并调整层级 #

修改.container的样式，让它脱离文档流叠加在header上方，同时保持居中：

.container {
    width: 1500px;
    margin: 0 auto;
    background-color: transparent; /* 去掉白色背景，避免遮挡header */
    position: absolute;
    top: 50%; /* 垂直居中，可按需调整数值 */
    left: 50%;
    transform: translate(-50%, -50%); /* 实现精准居中 */
    z-index: 10; /* 确保容器在header上方 */
}

3. 可选：调整Header层级 #

如果header内的导航需要显示在商品盒子上方，给header添加层级控制：

header {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 5; /* 添加该行，确保导航在商品盒子上层 */
}

原理说明 #

• 给单个商品盒子加绝对定位会让它们全部脱离文档流，丢失布局关系导致重叠；给容器加绝对定位，容器内的商品盒子仍能保持inline-block的并排布局。
• transform: translate(-50%, -50%)配合top:50%; left:50%可让容器完美居中，你也可以修改top值调整商品盒子的垂直位置。
• z-index控制元素堆叠层级，数值越大越靠上，确保容器在header背景图上方显示。

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