如何将网格元素放置在图片下方并保持屏幕居中显示

问题原因 #

你给.grid-container设置了position: fixed属性，该属性会让元素脱离正常文档流，定位时不会参考页面其他元素的位置，所以直接覆盖在了图片上方。

解决方案 #

根据你的使用场景可以二选一： #

方案1：正常文档流布局（推荐）

不需要fixed定位，让图片和网格按先后顺序排列，网格自动在图片下方且水平居中。
修改CSS如下：

.card {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 188px;
    width: 255px;
    margin: 1rem;
    position: relative;
}

.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
/* 新增图片居中样式 */
#test1 {
    text-align: center;
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
            ". . ."
            ". . .";
    max-width: 60%;
    /* 用margin实现水平居中，删除原有fixed定位相关代码 */
    margin: 20px auto 0;
}

HTML代码不需要修改，修改后页面会先显示顶部图片，图片下方自动显示居中的网格，滚动页面时二者会一起滚动。 #

方案2：保留fixed固定定位

如果你需要网格始终固定在视口居中位置，只是层级低于图片，修改CSS如下：

.card {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 188px;
    width: 255px;
    margin: 1rem;
    position: relative;
}

.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
/* 给图片容器设置层级高于网格 */
#test1 {
    position: relative;
    z-index: 10;
    text-align: center;
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
            ". . ."
            ". . .";
    max-width: 60%;
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 网格层级设置低于图片 */
    z-index: 1;
}

修改后网格始终固定在屏幕中间，滚动页面时图片会从网格上方滑过。

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