Xếp lớp phần tử trong CSS Grid

Hệ thống grid cung cấp khả năng xếp lớp các phần tử lên nhau khi các vùng grid giao nhau hoặc khi chỉ định lề ngoài âm. Việc xếp lớp có thể xảy ra theo mặc định, nhưng cũng có thể đặt thứ tự cụ thể cho từng phần tử thông qua các thuộc tính z-index và order, cũng như sự kết hợp của chúng.

Xếp lớp phần tử trong grid theo mặc định

Giả sử chúng ta có một bố cục, trong đó các phần tử chồng lên nhau:

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

Thay đổi thứ tự xếp lớp phần tử bằng thuộc tính `order`

Bây giờ hãy áp dụng thuộc tính order, đặt nó trong mỗi phần tử con:

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

Thứ tự xếp lớp phần tử bằng thuộc tính `z-index`

Bây giờ hãy áp dụng thuộc tính z-index, cho phép điều chỉnh thứ tự sắp xếp phần tử dọc theo trục z:

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

Như có thể thấy từ kết quả thu được, giá trị thuộc tính z-index cao nhất sẽ đặt phần tử đó lên trên các phần tử khác với giá trị thấp hơn.

Kết hợp xếp lớp phần tử bằng các thuộc tính `order` và `z-index`

Nếu chúng ta đã thay đổi thứ tự cho các phần tử bằng z-index và order, thì ưu tiên sẽ thuộc về z-index. Nhờ đó có thể thay đổi thứ tự các phần tử, nhưng đồng thời không mất kiểm soát việc xếp lớp của chúng:

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

Bài tập thực hành

Giả sử trong grid của chúng ta có bốn phần tử:

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

Hãy đặt tất cả các phần tử theo mẫu sau, sử dụng thuộc tính order:

Và bây giờ để giải bài tập trước đó hãy áp dụng thuộc tính z-index.