时间戳

首页 > 解决方案 > 重叠的网格元素：第二个 div 无法加载

css - 重叠的网格元素：第二个 div 无法加载

问题描述

两个 div 单独正确显示，但如果 img-1 和 img-2 div 都在容器中，则第二个 div 消失。

HTML：

<div class="body-background">
    <div class="background-img-1"></div>
    <div class="background-img-2"></div>
</div>

CSS

.body-background {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
}
.background-img-1 {
    background: red;
    grid-column: 1 / 3; 
}
.background-img-2 {
    background: blue;
    grid-column: 2 / 4;
}

盒子不应该正常重叠吗？

标签： csscss-grid

解决方案

给两个背景 div 一个grid-row: 1属性（变成grid-row: 1 / 2）。我不认为浏览器喜欢将它隐式地赋予两个重叠的单元格。

.body-background {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    width: 100vw;
    height: 100vh;
}
.background-img-1 {
    background-color: red;
    grid-column: 1 / 3;
    grid-row: 1;
}

.background-img-2 {
    background-color: blue;
    grid-column: 2 / 4;
    grid-row: 1;
}
<div class="body-background">
    <div class="background-img-1"></div>
    <div class="background-img-2"></div>
</div>

推荐阅读