Некоторые понятия CSS.

Здесь описаны некоторые концепции CSS, которые мне довелось изучить до сих пор.

  1. Z-index
  2. Контекст укладки
  3. Порядок укладки
  4. Переполнение и липкость
  5. Святой Грааль макета

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";
  }
Вход в полноэкранный режим Выход из полноэкранного режима

Это некоторые из тех вещей, которыми я хотел поделиться с вами. Надеюсь, это поможет. Спасибо за прочтение.

Оцените статью
Procodings.ru
Добавить комментарий