Css z-索引难题-如果A是B的子级，C显示在B上，A可以显示在C上吗？_Css

Css z-索引难题-如果A是B的子级，C显示在B上，A可以显示在C上吗？

css

Css z-索引难题-如果A是B的子级，C显示在B上，A可以显示在C上吗？,css,Css,我很难为这部电影定一个标题情况是： <body> <div id="B"> <div id="A"></div> </div> <div id="C"></div> </body> 我意识到我可以把A从B中取出，直接放在正文中，但这意味着要重写一些Javascript，而且我只是好奇上面描述的重叠类型是否可能 z-索引难题-如果A是B的子级，C显示在B上，A

我很难为这部电影定一个标题

情况是：

<body>
    <div id="B">
        <div id="A"></div>
    </div>
    <div id="C"></div>
</body>

我意识到我可以把A从B中取出，直接放在正文中，但这意味着要重写一些Javascript，而且我只是好奇上面描述的重叠类型是否可能

z-索引难题-如果A是B的子级，C显示在B上，A可以显示在C上吗

如果B为a建立了堆叠上下文，则为否，因为a在B的堆叠上下文中是隔离的，并且不能重叠该堆叠上下文之外的框（除非堆叠上下文本身重叠这些框，这意味着B必须重叠C）

因此，如果不将A移出B，或者不阻止B建立堆叠上下文，您就不可能尝试这样做（不清楚在您的示例中，B的

z-index:1

声明的作用是什么，但我假设在您的实际布局中有更多的事情使此选项变得非常重要）

z-索引难题-如果A是B的子级，C显示在B上，A可以显示在C上吗

因此，如果不将A移出B，或者不阻止B建立堆叠上下文，您就不可能尝试这样做（不清楚在您的示例中，B的

z-index:1

声明的作用是什么，但我假设在您的实际布局中有更多的事情使此选项变得非常重要）.

推荐阅读：推荐阅读：B可以拖动，因此其（也是绝对）位置已设置，但我忽略了这一点，以免不必要地使事情复杂化。这就是为什么它有一个z指数。好吧，我想我得稍微修改一下我的HTML结构。@jovan:是的，我也遇到过类似的情况。一段时间后你就会习惯了。B可以被拖动，因此它的（也是绝对的）位置被设置好了，但我忽略了这一点，以避免不必要的复杂化。这就是为什么它有一个z指数。好吧，我想我得稍微修改一下我的HTML结构。@jovan:是的，我也遇到过类似的情况。过一段时间你就会习惯的。

#B{
    width:100%;
    height:100%;
    z-index:1;
}

#A{
    position:absolute;
}

#C{
    position:absolute;
    bottom:0;
    width:300px;
    height:60px;
    left:50%;
    margin-left:-150px;
    z-index:5;
}