CSS Grid элементтеринин катмалашуусу

Grid системасында грид аймактары кесилгенде же терс сырткы четтер белгиленгенде бир элементтердин башкалардын үстүнө катмалашуу мүмкүнчүлүгү камсыз кылынган. Катмалашуу демейки абалда болушу мүмкүн, бирок ар бир элемент үчүн аны белгилүү бир тартипте z-index жана order касиеттери, ошондой эле алардын айкалышы аркылуу коюуга болот.

Gridде элементтердин демейки катмалашуусу

Бизде элементтери бири-бири менен катмалашкан таблица бар деп коёлу:

<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 касиетин колдонолу, ал элементтердин орношуу тартибин 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 касиетинин эң жогорку мааниси элементти төмөнкү маанилерге ээ башка элементтердин үстүнө жайгаштырууну белгилейт.

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

Практикалык тапшырмалар

Биздин gridде төрт элемент бар деп коёлу:

<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 касиетин колдонуңуз.