网格区域中的孩子是否可以在另一个网格区域上重叠？ [复制]答案

【问题标题】：Is it possible for a child in a grid-area to overlap on another grid-area? [duplicate]网格区域中的孩子是否可以在另一个网格区域上重叠？ [复制]
【发布时间】：2017-11-24 10:16:27
【问题描述】：

有一个“sidenav”网格区域（菜单列表），并且在 sidenav 的右侧有一个“内容”网格区域。单击 sidenav 网格区域中的菜单项之一时，我想在父菜单右侧显示与“内容”网格区域重叠的子菜单（li 元素）。

下面的css写好了，子菜单没有出现。当不使用 CSS 网格时，整个设置工作正常。如何使用 CSS 网格实现相同的效果？

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

预期输出：

【问题讨论】：

认为我们需要一个简化的案例演示。

标签： html css grid css-grid

【解决方案1】：

可以使用z-index，编号较大的item会与编号较小的item重叠，例如：

.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/

【讨论】：

感谢雷塔。我错过了那块。它工作正常。