CSS Grid Öğelerinin Üst Üste Binmesi

Grid sisteminde, grid alanlarının kesişmesi veya negatif dış boşlukların belirtilmesi durumunda bazı öğelerin diğerlerinin üzerine binmesi (üst üste gelmesi) olanağı sağlanmıştır. Üst üste binme varsayılan olarak gerçekleşebilir, ancak aynı zamanda her bir öğe için, z-index ve order özellikleri ve bunların kombinasyonu aracılığıyla belirli bir sırada ayarlanabilir.

Grid'de öğelerin varsayılan olarak üst üste binmesi

Birbirinin üzerine binen öğelerden oluşan bir tablomuz olduğunu varsayalım:

<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` özelliği ile öğelerin üst üste binme sırasını değiştirme

Şimdi order özelliğini uygulayalım, her bir alt öğede belirterek:

<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` özelliği ile öğelerin üst üste binme sırası

Şimdi, öğelerin z-ekseni boyunca yerleşim sırasını ayarlamamıza olanak tanıyan z-index özelliğini uygulayalım:

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

Elde edilen sonuçtan da görülebileceği gibi, z-index özelliğinin en yüksek değeri, öğeye daha düşük değerlere sahip diğer öğelerin üzerinde yerleşim belirler.

`order` ve `z-index` özelliklerini birleştirerek öğelerin üst üste binmesi

z-index ve order kullanarak öğelerin sırasını değiştirdiysek, öncelik z-index'te olacaktır. Bu sayede öğelerin sırasını değiştirebilir, ancak aynı zamanda üst üste binmeleri üzerindeki kontrolü de kaybetmemiş olursunuz:

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

Pratik Görevler

Grid'imizde dört öğe olduğunu varsayalım:

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

Tüm öğeleri aşağıdaki örneğe uygun şekilde yerleştirin, order özelliğini kullanın:

Şimdi bir önceki görevin çözümü için z-index özelliğini uygulayın.