【发布时间】：2012-11-28 17:06:32
【问题描述】：
我正在一个网站上工作，我想在背景中显示一个巨大的 图像 幻灯片以及引用和链接，出于技术目的（编辑 ：在下面的评论中描述）必须位于相同的父元素中。最重要的是我正在显示我的内容，并且在某一时刻我希望背景图像通过内容显示，我通过在我的两个内容元素（#header 和#main）之间设置一个边距来实现这一点.描述起来有点困难，但我希望this jsfiddle 能说明我在做什么。
问题是背景中显示的链接和引用不可点击，因为点击是指向上面显示的元素 (#header)。我知道 pointer-events: none; 但这并不好，因为我需要 IE 支持并且能够解释 #header 元素中的点击。
我想这在某种程度上归因于this answer 中提到的堆叠上下文，但我就是无法正确理解。如果不在#background 上使用负z-index，我将无法获得所需的布局，而#background 内的链接可能需要放在更高z-index 的父级中。合理的做法可能是将其放在标记中的其他位置，但如上所述，该链接与#background 中的其余内容相关。是否可以使链接堆叠上下文呈现在其父元素的堆叠上下文“上方”？
这里的代码有点长，没啥用，也没有那么复杂，请参考前面提到的jsfiddle。
【问题讨论】：
-
您能否描述限制您将引用和链接保留在与背景图像相同的父元素中的“技术目的”？似乎如果可以克服它们，堆叠引用和链接（或至少是链接）将解决这一挑战。
-
限制是当前实现使用幻灯片插件，该插件将图像和标题嵌套在单个元素中。你是对的，可以通过将引用放在其他地方来解决问题，但如果可能的话，我更喜欢 CSS 解决方案。