CSS Grid elementų persidengimas

Grid sistemoje numatyta galimybė vieniems elementams persidengti su kitais, kai susikerta grid sričiai arba nurodomi neigiami išoriniai atitraukimai. Persidengimas gali vykti pagal numatytuosius nustatymus, tačiau kiekvienam elementui taip pat galima nustatyti tam tikrą tvarką naudojant savybes z-index ir order, bei jų kombinacijas.

Elementų persidengimas gride pagal numatytuosius nustatymus

Tarkime, kad turime lentelę, kurioje elementai persidengia vienas kitą:

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

Elementų persidengimo tvarkos keitimas naudojant savybę `order`

Dabar pritaikykime savybę order, nustatydami ją kiekviename vaikiniame elemente:

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

Elementų persidengimo tvarka naudojant savybę `z-index`

Dabar pritaikykime savybę z-index, kuri leidžia derinti elementų išdėstymo tvarką išilgai z-ašies:

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

Kaip matyti iš gauto rezultato, aukščiausia savybės z-index reikšmė nustato elemento išdėstymą virš kitų elementų su žemesnėmis reikšmėmis.

Elementų persidengimo derinimas naudojant savybes `order` ir `z-index`

Jei pakeitėme elementų tvarką naudodami z-index ir order, tai prioritetas išliks z-index. Dėl to galima keisti elementų tvarką, bet kartu neprarasti kontrolės virš jų persidengimo:

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

Praktinės užduotys

Tarkime, kad mūsų gride yra keturi elementai:

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

Išdėstykite visus elementus pagal šį pavyzdį, naudodami savybę order:

O dabar ankstesnei užduočiai išspręsti pritaikykite savybę z-index.