html - HTML 在其父元素的兄弟元素之上堆叠一个子元素，该元素在父元素之上是 z-index'd

Question

我想让橙色 div 呈现在其他 div 之上，

无需更改 HTML 标记（即静态地，或通过 DOM 树操作动态地），也无需更改同级或父级的 z-index。

我可以使用任何可行的解决方案，JS、CSS 或 otehrwise（即适用于所有主流浏览器）

http://jsfiddle.net/jaSe7/

鉴于限制，实际上可能无法做我想做的事。

更新：查看这个小提琴的外观：http: //jsfiddle.net/chippper/jaSe7/1/但是小提琴对我不起作用，因为它操纵 DOM。

Answer 1

如果您不能直接更改 HTML，则必须使用 JavaScript。您需要将子级移出其父级，以使其在兄弟 div 上方建立索引。在 jQuery 中是这样的：

var childHtml = $('#parent').html();
$('#child').remove();
$('#parent').after(childHtml);

请参阅我更新的小提琴。

Answer 2

不确定这是否仍然是一个问题，但我发现了这个问题：

Z-Index 相对还是绝对？

埋在讨论中的是这条评论：

“如果您在示例中删除 X 上的 z-index，则不会创建新的堆叠上下文，并且 3 将与 2 重叠” – fionbio 20 年 9 月 23 日 18:02

因此，对于上述情况，如果您运行 fiddle，删除父元素的 z-index，那么 z-indexes 将按预期运行。现在，如果您需要对父元素进行 z 索引，那么我不确定选项是什么。