CSS Grid elementleriniň üstüne goýmak

Grid ulgamynda grid meýdanlarynyň kesişmegi ýa-da teris daşky aralyklary görkezmek bilen bir elementleriň beýlekileriň üstüne goýmak mümkinçiligi görkezilýär. Üstüne goýmak deslapky ýagdaýda bolup bilýär, ýöne şeýle hem her bir element üçin onuň tertibini z-index we order aýratynlyklary, şeýle hem olaryň kombinasiýasy arkaly kesgitlemek mümkin.

Gridde elementleriň deslapky üstüne goýulmagy

Bizde elementleriň bir-biriniň üstüne düşýän tablisasy bolsun:

<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` aýratynlygy arkaly elementleriň üstüne goýmak tertibini üýtgetmek

Indi order aýratynlygyny ulanyp, ony her bir çaga elementde kesgitalýarys:

<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` aýratynlygy arkaly elementleriň üstüne goýmak tertibi

Indi z-index aýratynlygyny ulanyp, elementleriň z-ögi boýunça tertibini sazlamaga mümkinçilik berýär:

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

Alynan netijeden görnüşi ýaly, z-index aýratynlygynyň iň ýokary bahasy elemente pes bahaly beýleki elementleriň ýokarsynda ýerleşmegi kesgitleýär.

`order` we `z-index` aýratynlyklarynyň birleşdirilmegi bilen elementleriň üstüne goýulmagyny birleşdirmek

Eger elementleriň tertibini z-index we order arkaly üýtgetsek, onda üstünlik z-index-de galar. Bu bolsa elementleriň tertibini üýtgetmäge mümkinçilik berýär, ýöne şol bir wagtyň özünde olaryň üstüne goýulmagyna gözegçiligi ýitirmän:

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

Amaly wezipeler

Göz öňüne getiriň, bizim gridimizde dört element bar:

<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 aýratynlygyny ulanyp, ähli elementleri aşakdaky nusga laýyklykda ýerleşdiriň:

Indi bolsa, öňki wezipäni çözmek üçin z-index aýratynlygyny ulanyň.