gpt4 book ai didi

css - z-index 难题 - 如果 A 是 B 的子级并且 C 显示在 B 之上,那么 A 可以显示在 C 之上吗?

转载 作者:太空宇宙 更新时间:2023-11-03 22:40:45 24 4
gpt4 key购买 nike

我在为这个设计标题时遇到了一些麻烦。

情况是:

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

B 是全屏 div,C 是绝对定位的页脚元素,始终显示在所有其他元素之上,包括 B。

A 是 B 中的弹出窗口,并且此弹出窗口的位置会发生变化,因此有时它会与页脚重叠。问题是,我需要将此弹出窗口显示在页脚上方,而其父 div 仍保留在页脚下方。这可能吗?简单地改变 A 的 z-index 没有任何作用。

当前的 CSS:

#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;
}

我知道我可以从 B 中取出 A 并将其直接放入正文中,但这将意味着重写一些 Javascript,而且我只是好奇上述重叠类型是否可能。

最佳答案

z-index conundrum - if A is child of B and C is displayed over B, can A be displayed over C?

如果 B 为 A 建立了一个堆叠上下文,那么不会,因为 A 在 B 的堆叠上下文中是孤立的,并且不能与该堆叠上下文之外的框重叠(除非堆叠上下文本身与这些框重叠,这意味着 B 必须与 C 重叠) .

因此,如果不将 A 移出 B,或阻止 B 建立堆叠上下文,您将无法尝试执行此操作(尚不清楚 z-index: 1 声明的目的是什么B 在您的示例中提供服务,但我假设您的实际布局中还有更多内容使此选项变得非常重要)。

关于css - z-index 难题 - 如果 A 是 B 的子级并且 C 显示在 B 之上,那么 A 可以显示在 C 之上吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44132309/

24 4 0
文章推荐: html - 尖 Angular flex 的背景图像
文章推荐: css - TYPO3 Mask CE背景图片
文章推荐: javascript - 当我滚动到不同的背景颜色时,如何使用 CSS 更改 Logo 的颜色
文章推荐: javascript - document.getElementById 在 asp.net 中的
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com