Переопределить контекст Stacking CSS Z-Index
Я пытаюсь переопределить/игнорировать контекст стека для элемента, чтобы он мог быть расположен на оси z относительно корня страницы.
Однако, согласно статье Что никто не сказал вам о Z-индексе:
Если элемент содержится в контексте стекирования в нижней части порядка укладки, нет способа заставить его появиться перед другим элементом в другом контексте стекирования, который выше в порядке укладки, даже с z-index миллиарда!
Новые контексты стекирования могут быть сформированы на элементе одним из трех способов:
- Когда элемент является корневым элементом документа (элемента)
- Если элемент имеет значение позиции, отличное от статического, и значение z-index, отличное от auto
- Когда элемент имеет значение непрозрачности менее 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;, (который создает новый контекст стекирования на первом node), тогда даже if .red имеет z-index:1, он по-прежнему будет размещен за другими элементами, потому что он просто отображается как самый высокий элемент в этом стеке.
Что выглядит так:
![demo]()
Q: существует ли способ, чтобы элемент игнорировал контекст стека любого из его родительских элементов и запрашивал расположение относительно исходного контекста стека страницы?
Ответы
Ответ 1
Q: существует ли способ, чтобы элемент игнорировал контекст стека любого из его родительских элементов и запрашивал расположение относительно исходного контекста стека страницы?
Нет, невозможно перенести позиционированный элемент между контекстами стекирования без изменения положения элемента в DOM. Вы даже не можете переместить элемент в контекст корневого стека с помощью position: fixed или position: absolute (как вы заметили, .red располагается относительно его родителя, div:first-child, потому что он создает новый контекст стекирования).
С учетом вашего HTML и CSS, должно быть тривиально просто переназначить классы вместо элементов div, как показано в других ответах и здесь поэтому все ваши div и span участвуют в корневом контексте стекирования:
<div class="red"><span>Red</span></div>
<div class="green"><span>Green</span></div>
<div class="blue"><span>Blue</span></div>
Но ваша ситуация, вероятно, не так проста, как кажется.
