격자 영역의 자식이 다른 격자 영역과 겹칠 수 있습니까?

Question

"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" 
    } 
} 

예상 출력 :

가

Answer 1

당신은 적은 수, 예를 항목 겹칠 높은 번호 Z-인덱스 항목을 사용할 수 :

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