grid-area 中的 child 是否可能与另一个 grid-area 重叠？

Question

在 sidenav 的右侧有一个 "sidenav" grid-area（菜单列表）和一个 "content" grid-area。单击 sidenav grid-area 中的菜单项之一时，我想在 parent 菜单的右侧显示与 "content" 网格区域重叠的子菜单（li 元素）。

写了下面的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/

grid-area 中的 child 是否可能与另一个 grid-area 重叠？

Is it possible for a child in a grid-area to overlap on another grid-area?

html

css

grid

css-grid