gpt4 book ai didi

html - 使具有负 z-index 的元素的子元素显示在所有其他元素之上

转载 作者:太空宇宙 更新时间:2023-11-04 15:29:20 24 4
gpt4 key购买 nike

我正在一个网站上工作,我想在背景中显示一个巨大的图像幻灯片以及引述和链接,出于技术目的(编辑 :在下面的评论中描述)必须位于同一个父元素中。最重要的是我正在显示我的内容,并且有一次我希望背景图像显示在内容中,我通过在我的两个内容元素之间设置边距来实现这一点(#header#main)。描述有点难,但我希望this jsfiddle给出了我在做什么的想法。

问题是背景中显示的链接和引用不可点击,因为点击是指向上方显示的元素 (#header)。我知道 pointer-events: none; 但这并不好,因为我需要 IE 支持并能够解释 #header 元素中的点击。

我想这在某种程度上归因于 this answer 中提到的堆叠上下文,但我就是做不对。如果不在 #background 上使用负 z-index,我将无法获得所需的布局,而 #background 中的链接可能需要放在更高的 z 指数。合理的做法可能是将它放在标记中的其他位置,但如上所述,该链接与 #background 中的其余内容相关。是否可以使链接堆叠上下文呈现在其父元素的堆叠上下文“上方”?

代码有点长,在这里没什么用,也不是很复杂,所以请引用前面提到的jsfiddle .

最佳答案

将巨型图像作为 <body> 的背景并且不要创建带有负值 z-index 的元素为了它。然后您的链接将是可点击的 - DEMO

关于html - 使具有负 z-index 的元素的子元素显示在所有其他元素之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13610557/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com