При использовании CSS Grid Layout возможно наложение элементов сетки друг на друга из-за пересекающихся областей сетки, отрицательных margin или других методов позиционирования. В этом случае элементы накладываются в соответствующем порядке — с учётом их места в документе и свойств order и z-index.
Исходный порядок документа
Если вы не будете специально менять порядок элементов сетки или применять к ним свойство z-index, все перекрывающиеся элементы будут упорядочены на основе исходного порядка документа. Иными словами, в том порядке, в котором они отображаются в исходной разметке.
Пример:
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
height: 90vh;
background-color: beige;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
position: relative;
left: -20vw;
top: 20vh;
}
.blue {
background: steelblue;
position: relative;
left: -40vw;
top: 5vh;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Модифицированный порядок документа
Это порядок, в котором располагаются элементы сетки после применения любых операций упорядочивания. Если вы ничего специально не меняли, то обычно это исходный порядок.
Однако вы можете воспользоваться свойством order, чтобы поменять порядок элементов, если это необходимо. При использовании этой техники элементы сетки накладываются друг на друга по возрастанию, начиная с наименьшего номера группы. Элементы с одинаковым номером выкладываются в том порядке, в котором они располагаются в исходном коде.
Вот пример:
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
height: 90vh;
background-color: beige;
}
.red {
background: orangered;
position: relative;
left: -20vw;
top: 20vh;
order: 2;
}
.green {
background: yellowgreen;
position: relative;
left: -40vw;
top: 5vh;
order: 3;
}
.blue {
background: steelblue;
top: 5vh;
order: 1;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Использование свойства z-index
Вы также можете воспользоваться свойством z-index для послойного расположения элементов. Это свойство позволяет управлять порядком элементов по оси Z.
Вот пример:
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
height: 90vh;
background-color: beige;
}
.red {
background: orangered;
z-index: 3;
}
.green {
background: yellowgreen;
position: relative;
left: -20vw;
top: 20vh;
z-index: 1;
}
.blue {
background: steelblue;
position: relative;
left: -40vw;
top: 5vh;
z-index: 2;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Комбинация свойств z-index и order
Если к элементам сетки одновременно были применены свойства order и z-index, то значения z-index определяют итоговый контекст наложения. Это позволяет менять порядок элементов, не теряя контроля над их компоновкой.
Вот пример:
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
height: 90vh;
background-color: beige;
}
.red {
background: orangered;
position: relative;
left: -20vw;
top: 20vh;
order: 2;
z-index: 1;
}
.green {
background: yellowgreen;
position: relative;
left: -40vw;
top: 5vh;
order: 3;
z-index: 2;
}
.blue {
background: steelblue;
top: 5vh;
order: 1;
z-index: 3;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>