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

【问题标题】：HTML stack a child element above the sibling of it's parent, which has been z-index'd above the parentHTML 将一个子元素堆叠在其父元素的兄弟元素之上，该元素元素在父元素之上是 z-index'd
【发布时间】：2012-06-27 16:18:44
【问题描述】：

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

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

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

http://jsfiddle.net/jaSe7/

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

更新：请参阅此小提琴以了解其外观：http://jsfiddle.net/chippper/jaSe7/1/ 但是该小提琴对我不起作用，因为它操纵 DOM。

【问题讨论】：

这是一个奇怪的问题。您已经明确设置了这些 div 的定位和 z-index，但没有更改 HTML 或您想要更改显示的 z-indez？为什么？
兄弟元素、父元素和子元素是由我无法控制的 javascript 库创建的。 javascript 库具有现有的 z-index 规则，以保持同级呈现在父级之上，我无法真正更改。我想要的是在某些情况下将孩子带到兄弟姐妹之上，我只需要一种方法来做到这一点，考虑到现有兄弟姐妹、父子元素和子元素设置的约束。我发布的 jsfiddle 只是我遇到的布局问题的一个最小示例，我正在寻找解决它的方法。
红色高于绿色有关系吗？换句话说，这三个是否都需要按特定顺序排列，还是橙色只需要在其他两个之上而其他两个的顺序无关紧要？
是的，这就是问题的症结所在。在大多数情况下，基本上绿色高于红色，但有一个特定元素（橙色）是红色的子元素，我想将其渲染在其他所有元素之上。

标签： html css z-index

【解决方案1】：

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

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

See my updated fiddle.

【讨论】：

是的，这是一种可能的方法，但我的限制要求我在不改变 DOM 树的情况下更改渲染顺序。（我在原始声明中进行了修改以使这一点更清晰）
如果你不能操纵 DOM，那么你就不能让孩子出现在兄弟姐妹之上。 z-index 由兄弟元素决定 - 就 z-index 而言，子元素始终是“从属”的。对不起！
嗯。这一定是 Twitter Bootstrap 将工具提示附加到 DOM 底部的原因之一。

【解决方案2】：

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

Z-Index Relative or Absolute?

隐藏在讨论中的是这条评论：

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

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

【讨论】：