Z-индекс и стекирование; удаление дочернего элемента из контекста стека ⇐ CSS

[Anonymous]

Я пытаюсь изменить порядок расположения некоторых элементов; вот SSCCE.
Учитывая этот фрагмент HTML:

Код: Выделить всё

Lorem ipsum dolor.

Widgety goodness!



Lorem ipsum dolor.


Lorem ipsum dolor.

Я пытаюсь отобразить #widget поверх #block2; что, как вы увидите в следующем CSS, проблематично без изменения местоположения #widget в дереве узлов.

Код: Выделить всё

#block1, #block2, #block3 {
position: relative;
min-height: 50px;
width: 100%;
}
#block1, #block3 {
background-color: #abc;
color: #123;
z-index: 1;
}
#block2 {
background-color: #def;
color: #456;
z-index: 2;
}
#widget {
background-color: #f00;
position: absolute;
z-index: 999;
left: 200px;
top: 40px;
}

Как вы можете видеть в скрипте, #widget частично перекрывается #block2; что имеет смысл, поскольку родительский #block1 находится ниже среди братьев и сестер в порядке укладки.
Очевидный ответ: сделать #widget дочерним из #block2, но, к сожалению, здесь это не решение. Кроме того, элементы #blockN не могут изменять относительные значения z-index; блоки 1 и 3 должны быть меньше 2. (под этим я подразумеваю, что вычисленные значения могут быть разными, но #block2 всегда будет больше, чем его братья и сестры). Причиной этого является многоуровневость box-shadow.
Есть ли какой-нибудь разумный (читай: кроссбраузерный, IE7+) способ удалить # виджет из контекста наложения, сохраняя при этом его положение, координаты, размеры и т. д.?
Использование фиксированного позиционирования удаляет его по желанию, однако он также получает виджет все визуальные свойства исправлены (что делает это нерешением)
Я думаю, что на этот вопрос можно было ответить окольным путем, однако Я не нашел этого. Также прошу прощения; Похоже, я упустил некоторые безобидные, но ключевые детали в своем первоначальном посте. Кажется, я уже рассмотрел их все.

Подробнее здесь: https://stackoverflow.com/questions/183 ... ng-context