如何让4个盒子在渐变遮罩元素上方横向排列？

问题根源是你给每个产品盒子添加了position: absolute——绝对定位会让元素脱离文档流，flex容器的布局规则对它们完全失效，所以四个盒子会重叠在同一位置；而去掉绝对定位后，.products容器默认排在.hero-fade下方，因此需要调整它的位置来覆盖到.hero-fade上方。

按以下步骤修改CSS即可解决：

1. 删除四个产品盒子（.gaming、.fashion、.pc、.space）的position: absolute和top属性，让flex布局能正常控制它们横向排列。
2. 给.products容器添加相对定位和负top值，让它向上偏移到.hero-fade的上方区域，同时可添加gap属性控制盒子间距。
3. 可选：给产品盒子设置flex: 1，让它们自动平分容器宽度，避免固定宽度导致溢出；也可保留固定宽度，根据容器宽度调整间距。

修改后的完整CSS代码：

.hero-fade{
    background-color: #d4ebf9;
    height: 200px;
    width: 100%;
    -webkit-mask-image: linear-gradient(black, rgba(0,0,0,0));
    mask-image: linear-gradient(black, rgba(0,0,0,0));
}

.products{
    display: flex;
    margin-left: 1.5%;
    margin-right: 1.5%;
    position: relative;
    top: -150px; /* 可根据需要的覆盖高度调整数值 */
    gap: 15px; /* 控制盒子之间的间距 */
}

.gaming{
    background-color: blue;
    flex: 1; /* 自动平分容器宽度，替代固定width */
    min-width: 250px; /* 可选：设置最小宽度避免盒子过窄 */
    height: 420px;
}

.fashion{
    background-color: blue;
    flex: 1;
    min-width: 250px;
    height: 420px;
}

.pc{
    background-color: blue;
    flex: 1;
    min-width: 250px;
    height: 420px;
}

.space{
    background-color: blue;
    flex: 1;
    min-width: 250px;
    height: 420px;
}

HTML代码无需修改，保持原样即可。调整后四个盒子会横向排列，同时覆盖在.hero-fade元素的上方区域。

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