Suprapunerea elementelor
Manipulând poziția elementelor, putem realiza ușor suprapunerea acestora, creând astfel straturi de elemente. De exemplu, să definim următorul grid:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Grid Layout în CSS3</title>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.grid-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
text-align: center;
font-size: 1.1em;
padding: 1.5em;
color: white;
z-index: 1;
}
.item1 {
grid-area: 1 / 1 / 3 / 4;
opacity: 0.8;
}
.item2 {
grid-area: 1 / 1 / 2 / 2;
}
.item3 {
grid-area: 1 / 3 / 2 / 4;
}
.item4 {
grid-area: 2 / 1 / 3 / 2;
}
.item5 {
grid-area: 2 / 2 / 3 / 3;
}
.item6 {
grid-area: 2 / 3 / 3 / 4;
}
.item7 {
grid-area: 3 / 1 / 4 / 2;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
.color4 {background-color: #2A9FBC;}
.color5 {background-color: #4e342e;}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1 color2">Grid Item 2</div>
<div class="grid-item item2 color1">Grid Item 1</div>
<div class="grid-item item3 color3">Grid Item 3</div>
<div class="grid-item item4 color4">Grid Item 4</div>
<div class="grid-item item5 color1">Grid Item 5</div>
<div class="grid-item item6 color4">Grid Item 6</div>
<div class="grid-item item7 color5">Grid Item 7</div>
</div>
</body>
</html>Aici primul element ocupă același spațiu ca și celelalte cinci elemente. Datorită setării proprietății z-index: 1 la toate elementele, rezultatul este că primul element se află de parcă ar fi fundalul pentru celelalte cinci elemente.
Dacă este necesar, stratul primului element poate fi adus mai aproape de utilizator, acoperind celelalte elemente. Pentru aceasta, trebuie să mărim valoarea z-index:
.item1 {
grid-area: 1 / 1 / 3 / 4;
opacity: 0.8;
z-index: 10;
}