Важные концепции каскадирования в CSS

внешний интерфейс HTML CSS
Важные концепции каскадирования в CSS

Недавно столкнулся с проблемой в процессе проекта.Меню-бар надеется всегда отображаться вверху, а элементы после него отображаются под ним.В то время установка z-индекса не дает никакого эффекта.Я не знаю причину, поэтому я нашел информацию о каскадировании в CSS и решил эту проблему. Запишите это здесь ~

Экран представляет собой двухмерную плоскость, но элементы HTML расположены в трехмерной системе координат, где x — горизонтальное положение, y — вертикальное положение, а z — положение экрана изнутри наружу. Когда мы смотрим на экран, мы следуем оси Z. Направление снаружи внутрь, таким образом, элементы образуют каскадную связь с точки зрения пользователя, и элемент может покрывать другие элементы или может быть покрыт другими элементами;

Итак, вот несколько важных концепций:контекст стека(контекст стекирования, контекст стекирования),Каскадный уровень(уровень стека),Каскадный порядок(порядок укладки, порядок укладки, порядок укладки),z-index

утверждение:

  1. Следующие элементы позиционирования относятся кposition: absolute|fixed|relative|sticky
  2. Следующие непозиционированные элементы относятся кposition: initial|static
  3. Существует аналогичная концепция наложения контекстов:контекст форматирования на уровне блока(BFC, Контекст блочного форматирования), вы можете обратиться кВажные BFC в CSS, который также знакомит с содержанием некоторых потоков документов;
  4. Эта статья довольно длинная, но если у вас хватит смелости прочитать ее, вы должны иметь базовые понятия, связанные со стекированием (~o￣▽￣)~

Заинтересованные студенты могут добавить группу WeChat в конце статьи для совместного обсуждения~

1. Контекст стекирования

контекст стека(контекст стекирования, контекст стекирования) — это трехмерная концепция в HTML. В спецификации CSS2.1 положение каждого элемента является трехмерным.Когда элемент сложен, он может перекрывать другие элементы или быть перекрыт другими элементами, чем выше ось z, тем ближе он к экрану. зритель закрыть

статьяЕсть хорошая аналогия, вот цитата;

Представьте себе таблицу с кучей элементов, и эта таблица представляет собой контекст стека. Если рядом с первой таблицей находится вторая таблица, эта вторая таблица представляет другой контекст стека.

А теперь представьте, что на первом столе есть четыре маленьких квадратика, и все они лежат прямо на столе. Поверх этих четырех квадратиков лежит кусок стекла, а поверх стакана – тарелка с фруктами. Эти кубики, кусочки стекла и вазы с фруктами представляют разные слои в контексте укладки, то есть стол.

Каждая веб-страница имеет контекст стека по умолчанию. Корень этого контекста стека (таблица)<html></html>. Все в теге html помещается в стек этого контекста стека по умолчанию (элементы размещаются на столе).

Когда вы даете позиционированный элемент, кромеautoz-index, вы создаете новый контекст стека со стеками, независимыми от других контекстов стека и стеков на странице, что эквивалентно внесению в комнату еще одного стола.

Контекст стекирования 1 (Контекст стекирования 1) формируется корневым элементом документа, Контекст стекирования 2 и 3 (Контекст стекирования 2, 3) представляют собой слои стекирования в Контексте стекирования 1 (Контекст стекирования 1). Каждый из них также формирует новый контекст наложения, который содержит новые слои наложения.

В контексте наложения его дочерние элементы накладываются друг на друга в соответствии с описанными выше правилами. формирование контекста стекаметодимеют:

  • корневой элемент<html></html>
  • positionзначениеabsolute | relative,иz-indexзначение неauto
  • positionзначениеfixed | sticky
  • z-indexзначение неautoгибкий элемент, то есть: родительский элементdisplay: flex | inline-flex
  • opacityстоимость имущества меньше1Элементы
  • transformстоимость имущества неnoneЭлементы
  • mix-blend-modeстоимость имущества неnormalЭлементы
  • filter,perspective,clip-path,mask,mask-image,mask-border,motion-pathзначение неnoneЭлементы
  • perspectiveзначение неnoneЭлементы
  • isolationсвойство установлено наisolateЭлементы
  • will-changeЛюбые свойства CSS, указанные в
  • -webkit-overflow-scrollingсвойство установленоtouchЭлементы

Суммировать:

  1. Контексты стекирования могут содержаться внутри других контекстов стекирования и вместе образуют иерархический контекст стекирования.
  2. Каждый контекст укладки полностью независим от своих братьев и сестер, и при укладке учитываются только дочерние элементы, что-то вродеBFC
  3. Каждый контекст наложения является самодостаточным: когда содержимое элемента складывается, веськонтекст стека в родительскомслоистых по порядку

2. Уровень стека

Каскадный уровень(Уровень наложения, Уровень наложения) Определяет порядок отображения элементов по оси Z в одном контексте наложения.концепция;

  • Уровень стека обычных элементов определяется контекстом стека, в котором они расположены.
  • Сравнение уровней стека имеет смысл только в пределах одного и того же элемента контекста стека.
  • В том же контексте наложения описание уровня наложения определяет верхний и нижний порядок элементов в контексте наложения по оси Z.

Обратите внимание, что уровень наложения не обязательно определяется z-индексом, только уровень наложения позиционированного элемента определяется z-индексом, а уровень наложения элементов других типов определяется порядком наложения, порядком в которые они появляются в HTML, и элементы над их родительским элементом. Уровень размещения определяется вместе. Подробные правила см. в описании последовательности размещения ниже.

3. z-index

В CSS 2.1 все элементы блочной модели находятся в трехмерной системе координат. В дополнение к нашим обычным абсциссе и ординате, элементы блочной модели также могут быть сложены вдоль «оси Z. Когда они перекрывают друг друга, порядок оси Z становится важным.

-- CSS 2.1 Section 9.9.1 - Layered presentation

z-индекс применим только к позиционированным элементам, недействителен к непозиционированным элементам, он может быть установлен на положительное целое число, отрицательное целое число, 0, авто, если позиционированный элемент не имеет установленного z-индекса, то по умолчанию используется автоматический;

Значение z-index элемента имеет смысл только в том же контексте стека. Если уровень стека родительского контекста стека ниже, чем уровень стека другого контекста стека, то его z-индекс устанавливается выше этого. Поэтому, если вы столкнулись с большим значением z-индекса, которое не работает, проверьте, распространяется ли его родительский контекст наложения на другие контексты наложения.

4. Порядок укладки

Каскадный порядок(порядок наложения, порядок наложения, порядок наложения) описывает порядок элементов в одном контексте наложения.правило, начиная с нижней части стопки, существует семь порядков укладки:

  1. фоны и границы: Фон и граница элементов, формирующих контекст наложения.
  2. Отрицательное значение z-индекса: Позиционирование дочерних элементов с отрицательными значениями z-index в контексте наложения, чем больше отрицательное значение, тем ниже уровень наложения;
  3. коробка блочного уровня: блочные непозиционированные дочерние элементы в потоке документов;
  4. плавающий ящик: непозиционируемый плавающий элемент;
  5. Встроенный блок: встроенные непозиционированные дочерние элементы в потоке документов;
  6. z-index: 0: позиционирование элементов с z-индексом 0 или auto, эти элементы формируют новый контекст наложения;
  7. Положительное значение z-индекса: z-индекс является положительным элементом позиционирования, чем больше положительное значение, тем выше уровень стека;

Элементы с одинаковым порядком размещения располагаются в том же порядке, в котором они появляются в HTML; элементы в порядке седьмого уровня отображаются над элементами в предыдущем порядке, который, по-видимому, перекрывает элементы более низкого уровня:

5. Настоящий бой

5.1 Общая ситуация

триrelativeпозиционируетсяdivкаждый в блокеabsoluteразных цветовspan.red,span.green,span.blue, они все настроеныposition: absolute;

См. Codepen — Общий случай

Затем, когда ни один элемент не содержит атрибут z-index, элементы в этом примере располагаются в следующем порядке (снизу вверх):

  1. Фон и граница корневого элемента
  2. Непозиционированные элементы уровня блока располагаются в том порядке, в котором они появляются в HTML.
  3. Встроенные непозиционированные элементы располагаются в том порядке, в котором они появляются в HTML.
  4. Позиционированные элементы располагаются в том порядке, в котором они появляются в HTML.

И красный, и зеленый, и синий принадлежат элементам позиционирования, z-индекс которых установлен автоматически, поэтому они относятся к шестому уровню порядка размещения в соответствии с правилом 7-уровневого порядка размещения, поэтому они размещаются в порядке появления в HTML. :红->绿->蓝

5.2 В случае родительских элементов одного и того же контекста стека

красный и зеленый вdiv.first-boxвниз, синий находитсяdiv.second-boxДалее устанавливаются красный, зеленый и синийposition: absolute,first-boxиsecond-boxвсе готовоposition: relative;

См. Codepen — разные родительские элементы, но все они находятся под корневым элементом.

В этом примере родительский элемент красного, синего и зеленого элементовfirst-boxиsecond-boxНи один из них не генерирует новый контекст наложения, все они принадлежат элементам в корневом контексте наложения, и все они находятся на шестом уровне порядка наложения, поэтому они складываются в порядке появления в HTML:红->绿->蓝

5.3 Добавление z-индекса к дочерним элементам

красный и зеленый вdiv.first-boxвниз, сине-желтый расположен вdiv.second-boxДалее устанавливаются красный, зеленый и синийposition: absolute, если в это время вы добавите атрибут к зеленомуz-index: 1, то в это время.greenна вершине;

если в.second-boxВниз.greenс последующим абсолютным позиционированиемspan.gold,настраиватьz-index: -1, то он будет располагаться ниже красного, зеленого и синего;

См. Codepen - установлен z-index

В этом примере новый контекст наложения не создается в родительских элементах красного, синего, зеленого и желтого элементов, и все они принадлежат элементам корневого контекста наложения.

  1. Для красного и синего не задан z-индекс, оба относятся к шестому уровню в порядке наложения и складываются в порядке появления в HTML;
  2. Зеленый имеет положительный z-индекс и относится к уровню 7;
  3. Huang устанавливает отрицательный z-индекс и принадлежит к уровню 2;

Таким образом, порядок, отображаемый снизу вверх в этом примере, следующий:黄->红->蓝->绿

5.4 В случае родительских элементов с разными контекстами наложения

красный и зеленый вdiv.first-boxвниз, синий находитсяdiv.second-boxДалее устанавливаются красный, зеленый и синийposition: absolute,еслиfirst-boxСоотношение настройки z-indexsecond-boxвелик, то независимо от того, насколько велик синий z-индексz-index: 999, синий расположен ниже красного и зеленого; если мы только изменим значение z-индекса красного и зеленого, так как оба элемента находятся в родительском элементеfirst-boxВ сгенерированном каскадном контексте тот, кто имеет большее значение z-index в это время, находится на нем;

См. Codepen — родительские элементы для различных контекстов стекирования

В этом примере красный, зеленый и синий — все позиционированные элементы с установленным z-index, но их родительские элементы создают новый контекст наложения;

  1. красно-зеленый родительский элементfirst-boxЭто элемент позиционирования с положительным набором z-index, поэтому создается контекст наложения, который принадлежит седьмому уровню в порядке наложения;
  2. синий родительский элементsecond-boxТакже создается контекст наложения, который принадлежит шестому уровню в порядке наложения;
  3. В порядке укладки,first-boxВсе элементы вsecond-boxначальство;
  4. И красный, и зеленый принадлежат контексту стека.first-boxПосередине установлены разные положительные z-индексы, все они относятся к седьмому уровню в порядке наложения;
  5. Синий принадлежит контексту стекаsecond-box, и задается большой положительный z-индекс, который принадлежит седьмому уровню каскадного элемента;
  6. Хотя синий z-индекс очень большой, т.к.second-boxКоэффициент каскадного уровняfirst-boxмаленькие, а потому ниже красных и зеленых;

Таким образом, порядок отображения в этом примере снизу вверх:蓝->红->绿

(Я столкнулся с ситуацией, похожей на этот пример)

5.5 Установка прозрачности для дочерних элементов

красный и зеленый наdiv.first-boxвниз, синий находитсяdiv.second-boxДалее устанавливаются красный, зеленый и синийposition: absolute, зеленый наборz-index: 1, то в это время зеленый находится выше красного и синего;

Если в это время датьfirst-boxнастраиватьopacity: .99, в это время независимо от того, насколько велик красный и зеленый z-индексz-index: 999, синий находится поверх красного и зеленого;

если в.second-boxВниз.greenдобавить один послеspan.gold,настраиватьz-index: -1, то он будет расположен ниже красного, зеленого и синего;

См. Codepen — влияние непрозрачности

Он был введен ранее, устанавливаяopacityКонтексты стекирования также могут быть сформированы, поэтому:

  1. first-boxуже настроенopacity,first-boxстановится новым контекстом стека;
  2. second-boxНовый контекст наложения не формируется, поэтому все элементы в нем принадлежат корневому контексту наложения;
  3. Желтый относится ко второму уровню в порядке укладки, красный и зеленый относятся к седьмому уровню,first-boxотносится к уровню 6, синий относится к уровню 6 в порядке наложения и расположен в том порядке, в котором появляется HTMLfirst-boxвыше;

Таким образом, порядок отображения в этом примере снизу вверх:黄->红->绿->蓝

Большинство сообщений в Интернете имеют разную глубину и даже некоторые несоответствия. Следующие статьи являются кратким изложением процесса обучения. Если вы найдете какие-либо ошибки, пожалуйста, оставьте сообщение, чтобы указать ~

Ссылаться на:

  1. Z-индекс, который вы не знаете
  2. MDN - z-index
  3. What No One Told You About Z-Index
  4. Тщательно понимать контекст стека CSS, уровень стека, порядок стека, z-индекс
  5. Более плавная анимация для оптимизации производительности интерфейса.
  6. Чего вы не знали о z-index
  7. Давайте поговорим о связанных с каскадом концепциях в CSS.

Рекомендуемое чтение:

  1. Важные BFC в CSS

PS: Всех приглашаю обратить внимание на мой публичный аккаунт [Front End Afternoon Tea], давайте работать вместе~

Кроме того, вы можете присоединиться к группе WeChat «Front-end Afternoon Tea Exchange Group», нажмите и удерживайте, чтобы определить QR-код ниже, чтобы добавить меня в друзья, обратите вниманиеДобавить группу, я заберу тебя в группу~

Категории