CSS грид элементларининг устима-уст тушиши

Грид тизимида грид соҳаларининг кесишиши ёки манфий ташги ҳошимларни кўрсатишда баъзи элементларнинг бошқалари устига тушиши имконияти мавжуд. Устима-уст тушиш сунъий холда амалга ошиши мумкин, аммо шунингдек, ҳар бир элемент учун уни аник тартибда z-index ва order хоссалари, шунгингдек уларнинг комбинацияси орқали белгилаш мумкин.

Гридда элементларнинг сунъий устима-уст тушиши

Фарз қилайлик, бизда элементлар бир-бирини устига тушадиган jadval мавжуд:

<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-index хоссасини қўллаймиз, у элементларни joylashish тартибини 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;
}

Олинган натижадан кўриниб турганидек, z-index хоссасининг энг юқори қиймати элементга бошқа элементлар устида joylashishni pastроқ қийматларга эга бўлган элементларга нисбатан белгилайди.

`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 хоссасидан фойдаланиб, барча элементларни quyidagi namuna мувофиқ жойланг:

Энди олдинги вазифани ечиш учун z-index хосласидан фойдаланинг.