Здесь описаны некоторые концепции CSS, которые мне довелось изучить до сих пор.
- Z-index
- Контекст укладки
- Порядок укладки
- Переполнение и липкость
- Святой Грааль макета
z-index
z-index – это свойство, которое используется для добавления еще одного измерения в приложение, как следует из названия – (z). Область просмотра имеет ширину и высоту, но z-index придает ей ощущение глубины.
Для длины есть как относительные, так и абсолютные единицы – px, которые могут определить, сколько пикселей должна охватывать длина, но в случае с глубиной невозможно определить ее в пикселях, по очевидным причинам, поэтому мы определяем ее относительно. Относительный здесь означает относительный друг к другу, т.е. хотим ли мы, чтобы определенный элемент был выше или ниже другого элемента.
Это отношение определяется путем присвоения абсолютной цифры в качестве значения свойству z-index. Несмотря на то, что эти цифры абсолютные, они используются относительно друг друга. Но что именно я подразумеваю друг под другом.
Контекст суммирования
Здесь возникает концепция контекста стекирования. Что такое контекст стекирования? Разделив эти слова, мы получим “штабелирование” и “контекст”. Штабелирование означает размещение вещей поверх других вещей (вы наверняка использовали стек как структуру данных), а контекст – это определенная обстановка или среда. Мы можем создать несколько стеков HTML-элементов на одной странице, каждый из которых будет иметь свой собственный контекст. Z-индекс элемента будет иметь значение только в том контексте, в котором находится данный элемент. Вот код для более наглядного представления.
<body>
<div id="parent1"></div>
<div id="parent2"></div>
</body>
/* for now, focus only on z-index */
#parent1 {
position: absolute;
z-index: 1;
width: 200px;
height: 200px;
background-color: lightblue;
}
#parent2 {
position: absolute;
z-index: 2;
top: 100px;
width: 200px;
height: 200px;
background-color: lightcoral;
}
Как видно, я создал контекст стекирования внутри body с parent1 и parent2 в качестве двух дочерних узлов. Их соответствующие z-индексы дают нам результат, где parent2 перекрывает parent1.
Теперь создадим еще один контекст суммирования, вложенный внутрь parent2.
<div id="parent1"></div>
<div id="parent2">
<div id="child1"></div>
<div id="child2"></div>
</div>
#parent2 > #child1 {
position: absolute;
top: 0;
z-index: -1; /* negative z-index */
width: 50px;
height: 50px;
background-color: lightgreen;
}
/* no z-index */
#parent2 > #child2 {
position: absolute;
top: 0;
width: 50px;
height: 50px;
background-color: lightyellow;
}
Здесь вы видите только child2, потому что z-индекс child1 равен -1. Теперь, видя только код, вы можете подумать, что из-за отрицательного z-индекса, child1 будет внизу всех элементов, но он не опускается ниже parent2, потому что -1 имеет значение только в контексте стекирования parent2.
Порядок суммирования
Порядок укладки – это порядок, в котором элементы располагаются в контексте. Как вы видели в приведенном выше примере, браузер определяет порядок элементов на основе их z-индекса.
Для лучшего понимания порядка укладки важно знать одно правило. Двигаясь снизу вверх, вот как располагаются элементы (за исключением элементов float, которые заслуживают отдельного блога). Позиционированный элемент с отрицательным z-индексом, непозиционированный элемент, позиционированный элемент без z-индекса и позиционированный элемент с положительным z-индексом.
/* unpositioned element */
div#one {
background-color: lightblue;
}
/* positioned with -ve z-index */
div#two {
position: absolute;
top: 15px;
z-index: -1;
background-color: lightcoral;
}
/* positioned with no z-index */
div#three {
position: absolute;
top: 0px;
background-color: lightgreen;
}
/* positioned with +ve z-index */
div#four {
position: absolute;
top: -10px;
z-index: 1;
background-color: lightgrey;
}
Переполнение и прилипание
Вот сценарий,
<div id="app">
<div id="menu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
#menu {
height: 200px;
width: 200px;
position: sticky;
top: 0;
overflow-y: auto;
background-color: lightgreen;
}
Ожидаемое поведение заключается в том, что меню должно прилипать к верхней части страницы, когда top: 0. Но в данном случае это не так. Я столкнулся с этой проблемой, когда создавал боковое меню. Первое, что я понял, это то, что для работы overflow мне нужно задать ему высоту. Второе, что я понял, это то, что sticky и overflow не могут быть вместе на одном элементе.
Теперь я изменил одну вещь.
#app {
position: sticky; /*sticky moved to parent element*/
top: 0;
}
#menu {
height: 200px;
width: 200px;
overflow-y: auto;
background-color: lightgreen;
}
Я задал позицию sticky родителю меню, и теперь оно работает просто отлично.
Макет Святого Грааля
В этом макете есть заголовок, основное содержимое, отступ и нижний колонтитул. Один из способов достижения этого макета с помощью сеток – разделить страницу на определенные колонки и строки с помощью grid-template-columns или grid-template-rows. Затем для каждого из вышеперечисленных элементов мы назначаем ячейку или область с помощью grid-column-start и grid-column-end и аналогично для строк.
Чтобы сделать его отзывчивым, нам придется изменять положение их ячеек/областей в сетке, используя те же свойства, о которых говорилось ранее.
Альтернативой этому являются области сетки. Во-первых, вот как выглядит макет.
На маленьких экранах он меняется на этот.
Теперь давайте посмотрим на код.
<body>
<header></header>
<aside id="left"></aside>
<aside id="right"></aside>
<main></main>
<footer></footer>
</body>
body {
display: grid;
grid-template-areas:
"header header header"
"aleft main aright"
"footer footer footer";
/*no. of strings defines the rows and no. of words
in each string defines the columns*/
height: 100vh;
}
header {
grid-area: header;
background-color: lightpink;
}
aside#left {
grid-area: aleft;
background-color: lightgreen;
}
main {
grid-area: main;
background-color: lightyellow;
}
aside#right {
grid-area: aright;
background-color: lightgreen;
}
footer {
grid-area: footer;
background-color: lightblue;
}
grid-template-areas – это свойство, которое принимает набор строк. Этот набор строк представляет собой чертеж макета.
Слова, присутствующие в этих строках, должны быть определены как значение свойства grid-area для соответствующих дочерних элементов. Например, в коде видно, что header является grid-area для элемента <header></header>.
Теперь, чтобы добавить отзывчивость, все, что мне нужно сделать, это изменить строки, определенные в grid-template-areas. Вот код.
body {
grid-template-areas:
"header"
"aleft"
"main"
"aright"
"footer";
}
Это некоторые из тех вещей, которыми я хотел поделиться с вами. Надеюсь, это поможет. Спасибо за прочтение.