CSS 그리드 요소 겹치기

그리드 시스템은 그리드 영역이 겹치거나 음수 외부 여백을 지정할 때 요소들이 서로 겹칠 수 있는 기능을 제공합니다. 겹침은 기본적으로 발생할 수 있지만, z-index 및 order 속성과 이들의 조합을 통해 각 요소에 대해 특정 순서로 겹침 순서를 지정할 수도 있습니다.

그리드에서 요소의 기본 겹침 순서

요소들이 서로 겹치는 그리드가 있다고 가정해 봅시다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
}

`order` 속성을 사용한 요소 겹침 순서 변경

이제 각 자식 요소에 order 속성을 적용해 보겠습니다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	order: 3;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	order: 2;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	order: 1;
}

`z-index` 속성을 사용한 요소 겹침 순서

이제 요소를 z-축을 따라 배치 순서를 조정할 수 있는 z-index 속성을 적용해 보겠습니다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	z-index: 1;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	z-index: 3;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	z-index: 2;
}

결과에서 볼 수 있듯이, z-index 속성의 값이 높을수록 해당 요소가 더 낮은 값을 가진 다른 요소들 위에 배치됩니다.

`order`와 `z-index` 속성을 함께 사용한 요소 겹침

z-index와 order를 사용하여 요소 순서를 변경한 경우, 우선순위는 z-index에 있습니다. 이를 통해 요소의 순서를 변경하면서도 겹침 순서에 대한 제어를 유지할 수 있습니다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	order: 3;
	z-index: 1;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	order: 1;
	z-index: 2;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	order: 1;
	z-index: 3;
}

실습 문제

그리드에 네 개의 요소가 있다고 가정합니다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
}
#elem2 {
	background-color: orange;
}
#elem3 {
	background-color: green;
}
#elem4 {
	background-color: lightblue;
}

다음 예시에 따라 모든 요소를 배치하고, order 속성을 사용하세요:

이제 이전 문제를 해결하기 위해 z-index 속성을 적용해 보세요.