новое хранилище знанийПередняя часть от входа до входаПросите внимания, помечайте звездочками и предложениями и время от времени обновляйте~

Эпизоды, которые вы не видели:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)
Если вы считаете, что это хорошо, пожалуйста, поставьте палец вверх

本文中所有示例均为 `html` 渲染构成，所以可以直接选中示例在控制台调试，推荐自己动手试试文章中列举的小提示，有助于加深理解 。有任何问题欢迎在评论中指出。

Эм. . . chrome --> наведите указатель мыши на пример --> щелкните правой кнопкой мыши --> проверьте

Большинство людей имеют представление о z-index после первоначального изучения CSS.z-indexиспользуется для описания и определения элемента на экранеZ轴порядок наложения". Например, если элемент A и элемент B перекрываются, будет немного скучно говорить, что, говоря другими словами,

Если красивая девушка А и текст Б аннотации перекрываются
Но когда страница отображается, текст находится над картинкой, блокируя вас от просмотра девушки.
В этот момент вы можете
- Установите z-индекс девушки на 999.
- Установите z-индекс текста на -1

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

z-indexсобственность только впозиционированный элемент(Определенныйpositionатрибут, а значение атрибута неstaticэлемент стоимости) имеет эффект.
элемент вZ轴порядок наложения на , к какому элементу принадлежит элементконтекст стека, элементальКаскадный уровень, а элемент впорядок в документеи т.д. Соопределение, элементz-indexvalue является лишь одним из условий, определяющих уровень укладки элементов.

Эти два должны быть запомнены и будут использоваться ниже.

Что такое «каскадный контекст»

Контекст стекирования — это трехмерная концепция в HTML. Он разделяет некое поле или область видимости, на уровне правил рендеринга отделяет внутреннюю часть от внешней и придает определенные характеристики самому элементу и внутренней области.

В спецификации CSS2.1 положение каждой блочной модели является трехмерным, то есть элемент находится в дополнение к краю страницы.X轴Y轴Плитка, а также имеет вертикальную глубину относительно экрана, что означает каскадированиеZ轴.

Для содержимого, отображаемого элементами, в целом элементы расположены в документе по порядку и взаимоисключающие, и мы не замечаем, что они находятся вZ轴каскадные отношения. И как только элементы будут сложены, обнаружится, что один элемент покрывает другой элемент или покрывается другим элементом.

Для иерархической структуры элементов родительский элемент и его дочерние элементы в большинстве случаев перекрываются, но, как правило, у родительского элемента не установлены границы и фон, или потому что дочерний элемент не превышает ширину и высоту родительского элемента. элемент, мы, как правило, также не знаем о штабелировании элементов.

После того, как элемент имеет контекст наложения из-за определенных настроек CSS, он станет элементом контекста наложения;

Элементы контекста наложения имеют следующие свойства:

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

Как создать «каскадный контекст»

Каскадные контексты в основном создаются некоторыми специфическими свойствами CSS.

HTMLкорневой элемент в<html></html>У него есть сам контекст стекирования, называемый «корневым контекстом стекирования».
Общие настройки элементаpositionсобственностьНетstaticзначение и установитьz-indexСвойство является конкретным значением, создающим контекст стека.
CSS3 добавляет некоторые условия для создания контекстов наложения, которые будут перечислены позже.

Каскадный уровень

Уровень стека, который определяеттот самыйПорядок, в котором элементы отображаются по оси Z в контексте наложения.

У всех элементов есть уровни наложения, включая наложение контекстных элементов. Каждый контекст наложения не зависит от родственных элементов, поэтому сравнение уровней наложения имеет смысл только в пределах текущего элемента контекста наложения.

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

Каскадный порядок

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

Когда элементы перекрываются, необходимо решить, какая часть содержимого отображается на экране, поэтому порядок наложения определяет правило приоритета, также известное как правило иерархической цепочки. Следующие рейтинги расположены по порядку, с уменьшением приоритета сверху вниз:

z-index > 0 (требуется, чтобы свойство z-index вступило в силу)
z-index: auto или z-index: 0 (z-index: auto не создает контекст стекирования)
встроенный, встроенный блок, встроенный блок
поплавокплавающий ящик
блочный блок уровня блока, не встроенный блок, дочерние элементы без позиционирования (кроме статического)
z-index < 0
укладки элементов контекстаbackground/border

Когда элементы расположены друг над другом, их отношения наложения обычно следуют двум следующим правилам:

В том же домене контекста стека, когда имеется очевидная индикация уровня стека, например допустимыйz-indexзначение, тот, у которого больше уровень каскадирования, перекрывает меньший.
Когда элементы располагаются на одном уровне и в одном порядке, более поздние элементы в потоке DOM перезаписывают более ранние элементы.

Объясните простым языком

После того, как концепция объяснена, давайте вступим в собственно боевое звено, подойдите, посмотрите на мою руку, теперь у нас есть два кота:

Критерий проверки 2,

Когда элементы располагаются на одном уровне и в одном порядке, более поздние элементы в потоке DOM перезаписывают более ранние элементы.

Затем сделайте их перекрывающимися:

<div class="container">
  <div class="black">
    <img src="black.jpg"></img>  
  </div>
<div class="white">
    <img src="white.jpg"></img>  
  </div>
</div>

.container{
  width: 300px;
  height: 200px;
  border: 1px solid grey;
}

.black{
  position: absolute;
}

.white{
  position: absolute;
  top: 50px;
  left: 50px;
}

токblack.imgа такжеwhite.imgОбщие элементы, родительский элемент также являются общими элементами, поэтому оба элемента находятся в «контексте корневого ламината». И ламинирование на том же уровне, сзади, чтобы следовать принципу черного или белого покрытия.

Критерий проверки 1

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

дать черный котblack.imgУвеличиватьz-indexсвойства и наборpositionсделать его эффективным

.black img{
  position: relative;
  z-index: 1;
}

токblack.imgэлемент контекста стека (не влияет на уровень стека сравнения),white.imgявляется обычным элементом, оба родителя которого являются нормальными элементами, поэтому оба находятся в «корневом контексте стека» элемента.black.imgС четкой маркировкой каскадного уровняz-index: 1. Итак, черная кошка покрывает белую кошку.

Проверьте функции 2, 3

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

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

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

Подключите приведенный выше код, сначала дайте белую кошкуwhite.imgУвеличиватьz-indexсвойства и наборpositionЧтобы сделать его эффективным, текущий код CSS выглядит следующим образом:

.container{
  width: 300px;
  height: 200px;
  border: 1px solid grey;
}

.black{
  position: absolute;
}
.black img{
  position: relative;
  z-index: 1;
}

.white{
  position: absolute;
  top: 50px;
  left: 50px;
}

.white img{
  position: relative;
   z-index: 2;
}

В настоящее время,black.imgа такжеwhite.imgВсе они представляют собой сложенные контекстные элементы (не влияют на сравнение ламината), а их родительские элементы являются обычными элементами, как в «корневых слоях корней».black.imgа такжеwhite.imgОба имеют очевидные каскадные горизонтальные отметины.z-index, белый котz-indexЗначение больше, чем у черного кота, поэтому оно перекрывается на черном коте.

Датьblackа такжеwhiteПополнитьz-indexатрибут, делатьblackа такжеwhiteгенерировать контекст стека

.black{
  position: absolute;
  z-index: 2;
}
.white{
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

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

blackа такжеwhiteв "контексте корневого стека" элемента,blackизz-indexбольше, чемwhite,следовательноblackпотомки элементовblack.imgпокрытwhiteпотомки элементовwhite.imgТо есть черный кот охватывает белый кот.

Проверить функцию 1

Уровень наложения контекста наложения выше, чем у обычных элементов;

Чтобы два изображения перекрывались, установитеblackШирина и высота равны 0.

Если вы продолжите использоватьposition: absoluteчтобы картинки перекрывались, проверить этот пункт невозможно, т.к. согласноКаскадный порядок,z-index: 0илиz-index: autoсебя, чемinlineилиblockВысокий приоритет, это не отражает того, что элемент контекста стека более сложен, чем обычные элементы.

HTML-код остается без изменений, css выглядит следующим образом

.black{
  width :0;
  height :0;
}
// markdown 编辑器可能会补充一些属性，导致黑猫无法显示，因此我们补充下面属性
.black img{
  width: 232px;
  height: 153px;
  max-width: inherit; 
}

В приведенном выше примере общими элементами являются белый и черный, в элементе «корневой многослойный контекст», в котором белый цвет находится за потоком DOM, поэтому белый цвет выше на черном.

Ниже мы используем условия создания контекстов, дополненные в css3, чтобы сделатьblackЭлементы создают контексты наложения.

элементальopacityстоимость имущества не1;

.black{
  width :0;
  height :0;
  opacity: 0.9;
}

Сейчас,blackelement — элемент контекста стека, его потомкиblack.imgУровень каскадирования больше, чем у обычного элемента, поэтому черный кот закрывает белого кота. Если присмотреться, то за черным фоном все еще можно увидеть белую кошку.

Проверьте порядок наложения: z-index: auto > встроенный/встроенный блок

В предыдущем примере упоминалось, чтоz-index: 0илиz-index: autoсебя, чемinlineилиblockВысокий приоритет, давайте проверим это. Общие свойства css следующие.

.black img{
  position: absolute;
}

установить толькоblack.imgдляposition: absolute;. Не указано явноz-indexзначение, браузер будет по умолчаниюz-index: auto.

токblack.imgа такжеwhite.imgявляются общими элементами (z-index: autoне создает контекст стека), родительский элемент которого также является обычным элементом, поэтому оба находятся в «корневом контексте стека» элемента. Элементы не имеют очевидных каскадных горизонтальных меток.z-index, согласно порядку укладки,z-index: auto > inline/inline-block, черная кошка сверху.

Если белый котwhite.imgдобавитьposition: absolute;Атрибуты,black.imgа такжеwhite.imgОни находятся на одном уровне каскадирования, и по принципу захода сзади белая кошка находится сверху. Выберите этот пример, чтобы отладить его в консоли.

Проверьте порядок укладки:`z-index < 0`> для укладки элементов контекста`background/border`

Перед этим проверим еще одно правило: блочное поле >z-index < 0Теперь у вас есть только черные кошки.

<div class="container">
  <div class="black">
    <img src="black.jpg"></img>  
  </div>
</div>

Датьblackустановить оранжевый цвет фона,black.imgнастраиватьz-index: -1

.black{
  background: orange;
}
.black img{
  position: relative;
  z-index: -1;
}

весьblackэлементы отображаются оранжевым цветом, доказывая, что уровень укладки блочных элементовz-index: -1высоко. тогда дайblackдобавление элементаopacity: 0.9,СделатьblackСоздайте контекст стека.

.black{
  background: orange;
  opacity: 0.9;
}
.black img{
  position: relative;
  z-index: -1;
}

В этот момент изображение появляется поверх оранжевого фона, подтверждаяz-index < 0> для укладки элементов контекстаbackground/border.

Правила CSS3 для создания контекстов наложения

В CSS3 свойство элемента, отвечающее одному из следующих условий, также создает контекст стека.

Значение свойства отображения родительского элемента равноflex|inline-flex, дочерний элементz-indexстоимость имущества неauto, дочерний элемент является элементом контекста стека (на этот разz-indexвступит в силу, не нужно устанавливатьposition);
элементальopacityстоимость имущества не1;
элементальtransformстоимость имущества неnone;
элементmix-blend-mode属性值不是normal；
元素的filter属性值不是none；
元素的isolation属性值是isolate；
will-change指定的属性值为上面任意一个；
元素的-webkit-overflow-scrolling属性值设置为прикоснуться`.

4-8 может быть Baidu или щелкнуть справочный документ 1

Проверить правило css3 1

Значение свойства отображения родительского элемента равноflex|inline-flex, дочерний элементz-indexстоимость имущества неauto, дочерний элемент является элементом контекста стека (на этот разz-indexвступит в силу, не нужно устанавливатьposition);

<div class="container">
  <div class="black">
    <img src="black.jpg"></img>  
  </div>
</div>

Датьblackустановить оранжевый цвет фона,black.imgнастраиватьz-index: -1.

.black{
  background: orange;
}
.black img{
  position: relative;
  z-index: -1;
}

Используя правило 1, дополнительные свойства CSS выглядят следующим образом:

.container{
  width: 300px;
  height: 200px;
  border: 1px solid grey;
  display: flex;
}
.black{
  background: orange;
  z-index:2; 
}

В этот момент изображение появляется поверх оранжевого фона в соответствии с порядком наложения.z-index < 0> для укладки элементов контекстаbackground/border, реверс в это время выдвигаетсяblackявляется элементом контекста стека.

белый кот вернет тебя

Теперь верните вам белую кошку, используйте следующий пример, чтобы проверить правила и свои мысли в консоли.