Переопределить контекст Stacking CSS Z-Index

Question

Я пытаюсь переопределить/игнорировать контекст стекирования для элемента, чтобы его можно было позиционировать по оси z относительно корня страницы.

Однако, согласно статье What No One Told You About Z-Index:

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

Новые штабелирования контексты могут быть сформированы на элементе в одном из трех способов:

• Когда элемент является корневым элементом документа (элемент)
• Когда элемент имеет значение позиции другого чем статическое и значение Z-индекс, отличный от автоматического
• Когда элемент имеет значение непрозрачности менее 1

с Фолля благодаря пример:

HTML:

<div><span class="red">Red</span></div> 
<div><span class="green">Green</span></div> 
<div><span class="blue">Blue</span></div> 

И некоторые CSS

.red, .green, .blue { position: absolute; } 
.red { background: red; } 
.green { background: green; } 
.blue { background: blue; } 

Если первый DIV дается opacity:.99;, (который создает new stacking context на первом узле), то даже , если .red имеет z-index:1, он по-прежнему будет размещен за другими элементами, потому что он просто отображается как самый высокий элемент внутри этого стека.

Working Demo in jsFiddle

который выглядит следующим образом:

Q: Есть ли способ для элемента игнорируемых контекста стека любой из его родителей элементы и попросить, чтобы быть размещены относительно исходного контекста стека страницы?

Answer 1

Q: Есть ли способ для элемента игнорировать контекст стека любого из его родительские элементы и просят быть позиционирован относительно первоначального контекста стека страницы?

Нет, невозможно перенести позиционируемый элемент между контекстами стекирования без изменения положения элемента в DOM. Вы даже не можете переместить элемент в контекст корневого стека с помощью position: fixed или position: absolute (как вы заметили, .red располагается относительно его родителя, div:first-child, потому что он создает новый контекст стекирования).

Это сказанное, учитывая ваш HTML и CSS должно быть тривиально просто переназначить классы для div элементов вместо этого, как показано в других ответах и ​​here так что все ваших div с и span с участвующим в контексте корневой штабелировании:

<div class="red"><span>Red</span></div> 
<div class="green"><span>Green</span></div> 
<div class="blue"><span>Blue</span></div> 

Но ваша ситуация, вероятно, не такая простая, как кажется.