Jump to content
  • 0

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


SnowSilver
 Share

Question

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

Прочитал статью на хабре

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

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

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

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

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

 

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

Edited by SnowSilver
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
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(на этом уровне блоков)

это так?

Link to comment
Share on other sites

  • 0

если вы примените 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, потому что они даже не сравниваются, т.к. уже находятся на разных уровнях/плоскостях (в разных контекстах)

  • Like 2
Link to comment
Share on other sites

  • 0

 

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, потому что они даже не сравниваются, т.к. уже находятся на разных уровнях/плоскостях (в разных контекстах)

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

Link to comment
Share on other sites

  • 0
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 by CrystalCrystal
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy