Я пытаюсь переопределить/игнорировать контекст стека для элемента, чтобы он мог быть расположен на оси 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, он по-прежнему будет размещен за другими элементами, потому что он просто отображается как самый высокий элемент в этом стеке.

Рабочая демонстрация в jsFiddle

Что выглядит так:

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>

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