728x90
그리드 항목은 계층화되어 교차하는 그리드 영역이 겹칠 수 있습니다.
CSS 그리드 레이아웃을 사용할 때 교차하는 그리드 영역, 음수 여백 또는 기타 위치 지정 기법으로 인해 그리드 항목이 겹칠 수 있습니다. 이 경우 주문이 수정 된 문서 순서와 z-index속성 에 따라 항목이 계층화됩니다 .
원시 문서 순서
특별히 z-index그리드 항목을 재정렬하거나 적용하지 않으면 중복되는 항목은 원본 문서 순서에 따라 정렬됩니다. 즉, 소스 태그에 나타나는 순서입니다.
예:
주문 수정 문서 주문
용어 주문 수정 된 문서의 순서는 어떤 순서 작업을 적용한 후 각 격자 항목이 순서를 의미합니다. 특별히 재정렬하지 않은 경우에는 대개 소스 순서가됩니다.
그러나 order필요한 경우 속성을 사용 하여 항목의 순서를 변경할 수 있습니다 .
이 기술을 사용하면 가장 낮은 번호의 서수 그룹에서 증가하는 표 항목이 계층화됩니다. 서수 그룹이 동일한 항목은 원시 문서 순서 (즉, 소스 문서의 순서)로 배치됩니다.
다음은 그 예입니다.
ere's an example:
z-index속성 사용
이 z-index속성을 사용 하여 항목을 계층화 할 수도 있습니다 . 이 속성을 사용하면 z 축을 따라 요소의 순서를 제어 할 수 있습니다.
다음은 그 예입니다.
결합 z-index및 order특성
그리드 항목을 모두 다시 정렬 한 경우 와 한 z-index적용의 z-index값은 궁극적 인 스태킹 컨텍스트를 결정합니다.
이렇게하면 레이어를 제어하지 않고 항목의 순서를 변경할 수 있습니다.
다음은 그 예입니다.
Here's an example:
728x90
'디자인 > HTML, CSS, JS' 카테고리의 다른 글
| CSS Grid Examples (1) | 2018.12.24 |
|---|---|
| CSS[14] 그리드 레이아웃을위한 브라우저 지원 (0) | 2018.12.23 |
| CSS[13] 그리드 인스펙터 사용하기 (0) | 2018.12.22 |
| CSS[12] 눈금으로 절대 위치 지정 (0) | 2018.12.22 |
| CSS[10] 그리드 정렬 (9가지) (0) | 2018.12.21 |
| CSS[9] 자동 배치가있는 양식 레이아웃 (0) | 2018.12.21 |
| CSS[8] 그리드 항목 배치 (0) | 2018.12.21 |
| CSS[7] Explicit vs Implicit Grid (0) | 2018.12.21 |
댓글