Наложэнне элементаў CSS гріда
У сістэме грід прадугледжана магчымасць
налажэння адных элементаў на іншыя пры
перасячэнні грід абласцей або ўказанні
адмоўных знешніх адступаў.
Налажэнне можа адбывацца па змаўчанні,
але таксама для кожнага элемента можна задаць яго ў пэўным парадку
праз уласцівасці z-index і order,
а таксама іх камбінацыі.
Налажэнне элементаў у грідзе па змаўчанні
Хай у нас ёсць табліца, у якой элементы перакрываюць адзін аднаго:
<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
Цяпер прымянім уласцівасць order,
задаўшы яго ў кожным даччыным элеменце:
<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
Цяпер прымянім уласцівасць z-index,
якое дазваляе наладжваць парадак
размяшчэння элементаў уздоўж z-восі:
<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;
}
:
Як відаць з атрыманага выніку,
самае высокае значэнне ўласцівасці z-index
задае элементу размяшчэнне паверху іншых
элементаў з больш нізкімі значэннямі.
Сумяшчэнне налажэння элементаў з дапамогай уласцівасцей order і z-index
Калі мы змянілі парадак для элементаў
з дапамогай z-index і order, то
прыярытэт застанецца за z-index.
Дзякуючы чаму можна мяняць парадак элементаў,
але пры гэтым не страціць кантролю над іх налажэннем:
<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;
}
:
Практычныя задачы
Хай у нашым грідзе ёсць чатыры элемента:
<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:
А цяпер для вырашэння папярэдняй задачы
прымяніце ўласцівасць z-index.
Хай у нашым грідзе ёсць чатыры элемента:
<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:
А цяпер для вырашэння папярэдняй задачы
прымяніце ўласцівасць z-index.
