предисловие
Недавно столкнулся с проблемой в проекте про элементы в CSSz-indexПроблема атрибутов, конкретная проблема не очень проста в описании, в общем, это установка цвета элемента и родительского элемента.positionсвойства иz-indexПосле соответствующих атрибутов визуализированные результаты на уровне элементов на странице не соответствуют моим ожиданиям. Согласно моему предыдущему пониманию, я не нашел разумного объяснения. Я знаю, что должна быть проблема с моим пониманием деталей соответствующих атрибутов, поэтому я понимаю причину, объединяя официальные документы и различные коллекции в Интернете. Напишите эту статью, чтобы поделиться с вами о CSS层叠上下文,层叠等级,层叠顺序так же какz-indexПолный набор соответствующих технических деталей.
Если есть какие-либо ошибки или важные упущения или есть какие-либо вопросы, пожалуйста, оставьте сообщение для исправления и обсуждения! благодарный!
Эта статья была синхронизирована с моим профилем. Для получения дополнительной информации, добро пожаловать в гостимоя личная домашняя страница, спасибо за внимание и поддержку!
«Одностороннее» понимание
В прошлом, из-за моего собственного использованияz-indexЧастота невелика, поэтому относительно однобокое понимание этого свойства CSS. всегда думалz-indexиспользуется для описания и определения элемента на экранеZ轴по порядку укладки.z-indexЧем больше значениеZ轴Чем выше вверх, тем ближе вы к экрану зрителя. В итоге оказалось, что с этим пониманием есть большая проблема:
- первый,
z-indexЗначения атрибутов не влияют ни на один элемент. Этотолько приПозиционирующий элемент (определенныйpositionатрибут, а значение атрибута неstaticэлемент стоимости) имеет эффект. - Элемент оценки в
Z轴Порядок наложения на , а не просто прямое сравнение двух элементовz-indexРазмер значения, порядок наложения фактически определяется элементомконтекст стека,Каскадный уровеньрешили вместе.
Чтобы полностью понять что-то, вы должны сначала понять, что это такое, то есть его определение. Давайте сначала посмотрим на упомянутое выше层叠上下文,层叠等级,层叠顺序кто они такие? Определения слишком абстрактны, и позже будет использована конкретная метафора, чтобы вы могли полностью понять, что они из себя представляют и как они связаны.
Что такое «каскадный контекст»
Контекст стекирования — это трехмерная концепция в HTML. В спецификации CSS2.1 положение каждой блочной модели является трехмерным, соответственно, на плоском холсте.X轴,Y轴а также представление сложенныхZ轴. Как правило, элементы в верхней части страницыX轴Y轴черепичными, мы не замечаем их вZ轴каскадные отношения. И как только элементы сложены, можно обнаружить, что элемент может покрывать другой элемент или покрываться другим элементом.
Если элемент содержит контекст укладки, (то есть это элемент контекста укладки), мы можем понять, что этот элемент находится вZ轴На "супериоре" конечная производительность такова, что она ближе к экрану зрителя.
образная метафора: Вы можете понимать элемент контекста стека какЭлемент стал официальным, в то время как другие некаскадные элементы контекста можно понимать как обычные массы. Любой «официальный элемент» имеет более высокий уровень, чем обычные элементы, то есть элемент находится в
Z轴Вершина выше, ближе к наблюдателю.
Что такое «каскадный уровень»
Итак, к чему относится каскадный уровень? Уровень стекирования (уровень стекирования, также называемый "уровень стекирования"/"уровень стекирования")
- В том же контексте стека он описывает, что элемент контекста стека в контексте стека находится в
Z轴порядок верх-низ. - Среди других общих элементов он описывает и определяет, что эти общие элементы находятся в
Z轴порядок верх-низ.
Говоря об этом, у многих людей могут возникнуть сомнения, будь то в контексте наложения или в обычном элементе, уровень наложения означает, что элемент находится вZ轴Порядок верх-низ наZ轴Верхний и нижний порядок в порядке! Зачем отдельные описания?
Чтобы проиллюстрировать почему, давайте возьмем каштан:
образная метафора: Как мы уже говорили, элементы в контексте стекирования подобны элементам-официалам, и их уровни, естественно, выше, чем у обычных элементов. Представим еще раз, что чиновник А — руководитель провинции, у которого дома есть секретарь а-1 и няня а-2. Другой офицер Б — руководитель уездного уровня, у него дома есть секретарь б-1 и няня б-2. Хотя и a-1, и b-1 являются секретарями, считаете ли вы, что есть что-то похожее между секретарем провинциального уровня и секретарем уездного уровня? Даже няня а-2 — это гораздо более высокий ранг, чем секретарь б-1. Кто больше, а кто меньше, кто выше, а кто ниже, понятно с первого взгляда, так что смысла сравнения нет вообще. Имеет смысл только сравнить размер a-1 и a-2 подчиненных A и b-1 и b-2 подчиненных B.
По аналогии с «каскадным контекстом» и «каскадным уровнем» делается вывод:
- Уровень стека обычных элементов определяется контекстом стека, в котором они размещены.
- Сравнение уровней наложения имеет смысл только в пределах текущего элемента контекста наложения. Сравнивать уровни стеков в разных контекстах стеков бессмысленно.
Как создать «каскадный контекст»
Сказав так много раньше, зная «контекст стекирования» и «уровень стекирования», остается один из самых важных вопросов: как сгенерировать контекст стекирования? Как превратить элемент в элемент контекста стека?
На самом деле, каскадный контекст в основном создается с помощью определенных свойств CSS, обычно существует три метода:
-
HTMLкорневой элемент в<html></html>j сам имеет контекст стека, называемый «корневым контекстом стека». - Общие настройки элемента
positionсобственностьНетstaticзначение и установитьz-indexСвойство является конкретным значением, создающим контекст стека. - Новые свойства в CSS3 также могут генерировать контексты наложения.
На этом этапе мы, наконец, можем кодировать, давайте поговорим с кодом, чтобы проверить приведенный выше вывод:
Каштан 1:
Есть два div, p.a, p.b завернуты в один div, p.c завернут в другой блок, установлен только для .a, .b, .cpositionа такжеz-indexАтрибуты
<style>
div {
position: relative;
width: 100px;
height: 100px;
}
p {
position: absolute;
font-size: 20px;
width: 100px;
height: 100px;
}
.a {
background-color: blue;
z-index: 1;
}
.b {
background-color: green;
z-index: 2;
top: 20px;
left: 20px;
}
.c {
background-color: red;
z-index: 3;
top: -20px;
left: 40px;
}
</style>
<body>
<div>
<p class="a">a</p>
<p class="b">b</p>
</div>
<div>
<p class="c">c</p>
</div>
</body>
Эффект:
z-index, поэтому контекст стека не будет создан, поэтому все .a, .b и .c размещаются<html></html>В «корневом контексте стека», сгенерированном тегом, который принадлежит к тому же контексту стека, чейz-indexБольшое значение, кто на вершине.
Каштан 2:
Есть два div, p.a, p.b завернуты в один div, p.c завернуты в другой бокс, заданы для обоих div и .a, .b, .c одновременноpositionа такжеz-indexАтрибуты
<style>
div {
width: 100px;
height: 100px;
position: relative;
}
.box1 {
z-index: 2;
}
.box2 {
z-index: 1;
}
p {
position: absolute;
font-size: 20px;
width: 100px;
height: 100px;
}
.a {
background-color: blue;
z-index: 100;
}
.b {
background-color: green;
top: 20px;
left: 20px;
z-index: 200;
}
.c {
background-color: red;
top: -20px;
left: 40px;
z-index: 9999;
}
</style>
<body>
<div class="box1">
<p class="a">a</p>
<p class="b">b</p>
</div>
<div class="box2">
<p class="c">c</p>
</div>
</body>
Эффект:
p.cэлементальz-indexЗначение равно 9999, что намного больше, чемp.aа такжеp.bизz-indexзначение, но из-заp.a,p.bродительский элементdiv.box1результирующего контекста стекаz-indexимеет значение 2,p.cродительский элементdiv.box2результирующего контекста стекаz-indexзначение равно 1, поэтомуp.cнавсегдаp.aа такжеp.bпод.
Между тем, если мы только изменимp.aа такжеp.bизz-indexзначение, так как оба элемента находятся в родительском элементеdiv.box1Результирующий контекст стека, поэтому, чейz-indexБольшое значение, кто на вершине.
Что такое «каскадный порядок»
После разговора о «контексте стекирования» и «уровне стекирования» давайте поговорим о «порядке стекирования». «порядок расположения» означает, что элементы располагаются в соответствии с определенными правилами порядка вZ轴отображается вертикально.Видно, что упомянутые выше «контекст наложения» и «уровень наложения» — это понятие, а «порядок наложения» здесь — правило.
- верхний левый" контекст стека
background/border" относится к фону и границе элемента контекста наложения. -
inline/inline-blockПорядок расположения элементов выше, чемblock(блочный уровень)/float(плавающий) элемент. - Просто учитывая порядок укладки,
z-index: autoа такжеz-index: 0На одном уровне, но сами значения двух атрибутов принципиально разные.
Для пункта 2 выше, почему
inline/inline-blockПорядок расположения элементов выше, чемblock(блочный уровень)/float(плавающий) элемент? Вы можете подумать об этом! Это на самом деле довольно просто, напримерborder/backgroundАтрибуты декоративных элементов. Плавающие и блочные элементы обычно используются для макета страницы. В начале веб-дизайна наиболее важным является текстовое содержимое. Поэтому, когда происходит каскадирование, текстовое содержимое будет отображаться первым, чтобы гарантировать, что это не покрыто.
«Рутина», которую вы хотите
Сказав так много выше, вы все еще можете быть немного сбиты с толку. С таким количеством концептуальных правил, вот самое практичное: существует ли «рутина», которая может четко определить, кто находится наверху, а кто внизу, когда элементы укладываются друг на друга? Ответ - должны быть!
1. Сначала проверьте, находятся ли два сравниваемых элемента в одном и том же контексте стека: 1.1 Если да, то у кого уровень стеков выше, а у кого выше (как судить о размере уровня стеков? - см. диаграмму "порядок стеков"). 1.2 Если два элемента не находятся в одном и том же контексте стека, сравните уровень стека контекста стека, в котором они находятся. 2. Когда два элемента имеют одинаковый уровень наложения и порядок наложения, последний уровень наложения элементов в структуре DOM находится выше первого элемента.
Просто говори, не практикуй фальшивую ручку
Для технического обучения представление кода является одним из самых интуитивно понятных и простых для понимания способов. Без лишних слов, давайте перейдем непосредственно к коду.Мы используем следующие «каштаны» для дальнейшей проверки и понимания вышеизложенных выводов.
Каштан 3:
<style>
.box1, .box2 {
position: relative;
z-index: auto;
}
.child1 {
width: 200px;
height: 100px;
background: #168bf5;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.child2 {
width: 100px;
height: 200px;
background: #32c292;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">
<div class="child1"></div>
</div>
<div class="box2">
<div class="child2"></div>
</div>
</body>
Эффект:
.box1/.box2Хотя наборposition: relative,ноz-index: autoслучай, дваdivЭто по-прежнему обычный элемент, контекст стека не создается. так,child1/.child2принадлежать<html></html>В «контексте корневого стека» элемента в этот моментВОЗz-indexБольшое значение, кто на вершине.
Каштан 4:
Для кода CSS в каштане 1 мы просто поместили.box1/.box2изz-indexзначение атрибута для数值0, остальные остаются без изменений.
.box1, .box2 {
position: relative;
z-index: 0;
}
...
Эффект:
.box1/.box2изz-indexзначение атрибута для数值0, конечный результат совершенно противоположный. В настоящее время.child2покрыт.child1над. какова причина? Все просто: потому что настройкиz-index: 0назад,.box1/.box2Генерируются соответствующие контексты стека, на этот раз для сравнения.child1/.child2Каскадные отношения полностью определяются родительским элементом..box1/.box2Каскадные отношения определяют. но.box1/.box2изz-indexзначения0, являются элементами блочного уровня (поэтому их уровень и порядок размещения совпадают), в этом случае вDOMв структуреЗадняя часть закрывает переднюю,так.child2чуть выше.
Влияние свойств в CSS3 на контексты стека
В CSS3 появилось много новых свойств, некоторые из которых также сильно влияют на контексты стекирования. следующим образом:
- Значение свойства отображения родительского элемента равно
flex|inline-flex, дочерний элементz-indexстоимость имущества неautoКогда дочерний элемент является элементом контекста стека; - элементаль
opacityстоимость имущества не1; - элементаль
transformстоимость имущества неnone; - элемент
mix-blend-mode属性值不是нормальный`; - элементаль
filterстоимость имущества неnone; - элементаль
isolationСтоимость свойстваisolate; -
will-changeУказанное значение атрибута является любым из перечисленных выше; - элементаль
-webkit-overflow-scrollingЗначение свойства установлено наtouch.
В CSS3 свойство элемента, удовлетворяющее одному из вышеуказанных условий, будет генерировать контекст наложения. Мы используем пункт 1, чтобы сделать простое объяснение.
Каштан 5:
<style>
.box {
}
.parent {
width: 200px;
height: 100px;
background: #168bf5;
/* 虽然设置了z-index，但是没有设置position，z-index无效，.parent还是普通元素，没有产生层叠上下文 */
z-index: 1;
}
.child {
width: 100px;
height: 200px;
background: #32d19c;
position: relative;
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="parent">
parent
<div class="child">child</div>
</div>
</div>
</body>
Эффект:
.childодеяло.parentпокрытый. По «рутине» анализировать:
несмотря на то что.parentуже настроенz-indexЗначение свойств, но не установленаpositionАтрибуты,z-indexНедействительно, поэтому контекст стека не создается..parentИли обычный элемент блочного уровня. В этот момент в правиле порядка наложенияz-indexзначение меньше, чем0из.childбыло бы обычнымblockэлемент блочного уровня.parentпокрытие.
Каштан 6:
Для каштана выше мы изменяем только свойства .box и устанавливаем display: flex, а остальные свойства и структура DOM остаются без изменений.
.box {
display: flex;
}
Эффект:
.boxнастраиватьdisplay: flexчас,.parentОн становится элементом контекста наложения.Согласно правилам порядка наложения, элемент контекста наложенияbackground/borderУровень стека меньшеz-indexзначение меньше, чем0каскадный уровень элементов, поэтомуz-indexзначение-1из.childсуществует.parentнад.
маленький тест
В следующем коде я поставлю окончательный результат рендеринга страницы после кода.Заинтересованные "детские тапочки" могут проанализировать уровень укладки каждого элемента, и окончательно определить, какой из этих элементов находится сверху, а какой снизу.
<style>
.parent {
width: 100px;
height: 200px;
background: #168bf5;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.child1 {
width: 100px;
height: 200px;
background: #32d19c;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.child2 {
width: 100px;
height: 200px;
background: #e4c950;
position: absolute;
top: 40px;
left: 40px;
z-index: -1;
}
.child2-1 {
width: 100px;
height: 200px;
background: #e45050;
position: absolute;
top: 60px;
left: 60px;
z-index: 9999;
}
.child2-2 {
width: 100px;
height: 200px;
background: #db68a7;
position: absolute;
top: 80px;
left: 40px;
z-index: -9999;
}
</style>
</head>
<body>
<div class="parent">
parent
<div class="child1">child1</div>
<div class="child2">
child2
<div class="child2-1">child2-1</div>
<div class="child2-2">child2-2</div>
</div>
</div>
</body>
Эффект:
Справочная статья
Некоторый из приведенного выше контента относится к блогам следующих двух великих богов. Они хорошо написаны и очень ясны. Я рекомендую всем взглянуть. Вы будете иметь более четкое представление о соответствующих пунктах знаний.
рекомендуемая статья
Следующие ссылки на статьи - это некоторые хорошие статьи, которые я видел в процессе обучения и практики.Друзья, которые заинтересованы и нуждаются, могут ссылаться на них для справки, надеясь помочь вам полностью понять эти вопросы, затронутые в статье.