z-index и контекст наложения

SnowSilver · December 20, 2017

Пытаюсь разобраться со слоями, но что то не выходит.

Зададим классу .red { z-index: 1;} - блок стал выше...
Но если мы родительскому элементу блока .red задаем opacity<1, то есть например opacity: 0.99, то блок снова почему то ниже по уровню.

В статья написано, что:

Новый контекст может быть сформирован в следующих случаях:

Если элемент – корневой элемент документа ( элемент)
Если элемент позиционирован не статически и его значение z-index не равно auto
Если элемент имеет прозрачность менее 1

Окей, значит я создал новый контекст opacity. Но если вместо оpacity применить position: relative например(из статьи следует что и они оба{opacity, position: relative} создают контекст), то почему красный блок все таки будет выше... Наверное разный контекст у них или что

Что подразумевается под созданием нового контекста для opacity?

Edited December 20, 2017 by SnowSilver

Switch74 · December 20, 2017

opacity:0.99; создает новый контекст на который не влияет z-index:1; и он как бы остается z-index:auto;
если вы добавляете position: relative; то z-index:1; начинает работать

SnowSilver · December 20, 2017

1 час назад, Switch74 сказал:

opacity:0.99; создает новый контекст на который не влияет z-index:1; и он как бы остается z-index:auto;
если вы добавляете position: relative; то z-index:1; начинает работать

допустим.

	<body>
		<div >
			<div class="red"></div>
		</div>
		<div >
			<div class="green"></div>
		</div>
		<div>
			<div  class="blue"></div>
		</div>
	</body>

а так они изначально в одном контексте получается ? или нет?

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

если для родительского блока div

<div >
    <div class="red"></div>
</div>

применить opacity < 1, то z-index не будет работать в контексте - в блоке div(на этом уровне блоков)

это так?

Switch74 · December 20, 2017

если вы примените opacity < 1 к <div >, то <div class="red"></div> будет находиться в контексте <div >, а не корневого элемента
z-index всегда работает относительно контекста,
т.е. есть у вас например два div с span
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
устанавливая z-index для span они все будут в папке корневого элемента (обзавем его как в linux '/') элементы естесно как массив
/span[0]
/span[1]
/span[2]
/span[3]
все span будут выравниваться по z-index относительно друг друга
теперь вы для первого div указали opacity или например как-нибудь по другому включили контекст, тогда у нас получится
/div[0] /span[0]
/div[0] /span[1]
/span[2]
/span[3]
тут получается что span[0] и span[1] даже не знают о существовании других span и естесно выравниваться будут только относительно друг друга с нулевым отсчетом относительно родительского div

еще это можно объяснить на примере комнаты:
смотрите вы сверху на свою комнату есть у вас пол, стул, стол с z-index 1,2,3 соответственно
на полу у вас лежат листки, на стуле и на столе
листки на столе лежат стопкой и естесно верхние перекрывают нижние, то же самое на стуле и полу, но
листки на столе логично что выше листков на стуле или полу, но они их не перекрывают, их перекрывает стол
т.е. листки на полу с z-index равным 1000 не будут перекрывать листки на столе с z-index равному 10, потому что они даже не сравниваются, т.к. уже находятся на разных уровнях/плоскостях (в разных контекстах)

SnowSilver · December 20, 2017

21 минуту назад, Switch74 сказал:

если вы примените opacity < 1 к <div >, то <div class="red"></div> будет находиться в контексте <div >, а не корневого элемента
z-index всегда работает относительно контекста,
т.е. есть у вас например два div с span
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
устанавливая z-index для span они все будут в папке корневого элемента (обзавем его как в linux '/') элементы естесно как массив
/span[0]
/span[1]
/span[2]
/span[3]
все span будут выравниваться по z-index относительно друг друга
теперь вы для первого div указали opacity или например как-нибудь по другому включили контекст, тогда у нас получится
/div[0] /span[0]
/div[0] /span[1]
/span[2]
/span[3]
тут получается что span[0] и span[1] даже не знают о существовании других span и естесно выравниваться будут только относительно друг друга с нулевым отсчетом относительно родительского div

еще это можно объяснить на примере комнаты:
смотрите вы сверху на свою комнату есть у вас пол, стул, стол с z-index 1,2,3 соответственно
на полу у вас лежат листки, на стуле и на столе
листки на столе лежат стопкой и естесно верхние перекрывают нижние, то же самое на стуле и полу, но
листки на столе логично что выше листков на стуле или полу, но они их не перекрывают, их перекрывает стол
т.е. листки на полу с z-index равным 1000 не будут перекрывать листки на столе с z-index равному 10, потому что они даже не сравниваются, т.к. уже находятся на разных уровнях/плоскостях (в разных контекстах)

Все, разобрался! Спасибо большое за объяснение!

CrystalCrystal · August 5, 2021

20.12.2017 в 09:35, Switch74 сказал:

если вы примените opacity < 1 к <div >, то <div class="red"></div> будет находиться в контексте <div >, а не корневого элемента
z-index всегда работает относительно контекста,
т.е. есть у вас например два div с span
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
устанавливая z-index для span они все будут в папке корневого элемента (обзавем его как в linux '/') элементы естесно как массив
/span[0]
/span[1]
/span[2]
/span[3]
все span будут выравниваться по z-index относительно друг друга
теперь вы для первого div указали opacity или например как-нибудь по другому включили контекст, тогда у нас получится
/div[0] /span[0]
/div[0] /span[1]
/span[2]
/span[3]
тут получается что span[0] и span[1] даже не знают о существовании других span и естесно выравниваться будут только относительно друг друга с нулевым отсчетом относительно родительского div

еще это можно объяснить на примере комнаты:
смотрите вы сверху на свою комнату есть у вас пол, стул, стол с z-index 1,2,3 соответственно
на полу у вас лежат листки, на стуле и на столе
листки на столе лежат стопкой и естесно верхние перекрывают нижние, то же самое на стуле и полу, но
листки на столе логично что выше листков на стуле или полу, но они их не перекрывают, их перекрывает стол
т.е. листки на полу с z-index равным 1000 не будут перекрывать листки на столе с z-index равному 10, потому что они даже не сравниваются, т.к. уже находятся на разных уровнях/плоскостях (в разных контекстах)

Но вот если вместо opacity указать position: relative, разве аналогичным образом не должен быть создан новый контекст для span.red?

http://jsfiddle.net/0ktyq9da/52/

Update:

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

Edited August 5, 2021 by CrystalCrystal

Sign In

z-index и контекст наложения

Question

SnowSilver

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

SnowSilver

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

SnowSilver

Link to comment

Share on other sites

CrystalCrystal

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information