网格区域中的孩子是否可能在另一个网格区域重叠？

Question

有一个＆＃34; sidenav＆＃34;网格区域（菜单列表），有一个＆＃34;内容＆＃34;网格区域到sidenav的右侧。单击sidenav网格区域中的一个菜单项时，我想在父菜单右侧显示子菜单（li元素），重叠＆＃34;内容＆＃34;网格区域。

编写以下css，子菜单不显示。不使用CSS网格时，整个设置工作正常。如何使用CSS网格实现相同的目标？

@media (min-width: 700px) {
    .main_container {
       grid-template-columns: 0.1fr 1fr;
       grid-template-areas: 
           "logo       header"
           "sidenav    content"
    }
}

预期产出：

Answer 1

您可以使用z-index，具有较高数字的项目将与具有较低数字的项目重叠，例如：

.grid > div:nth-child(2) {
z-index: 1; // this will be underneath items with higher z-index
}
.grid > div:nth-child(3) {
z-index: 2; // this will overlapp items with lower z-index
}

这里很好地解释了https://gridbyexample.com/learn/2016/12/20/learning-grid-day20/