我正在一个网站上工作，我想在后台显示一个巨大的图像幻灯片，以及一个引用和链接，用于技术目的（编辑 ：在下面的评论中描述）必须位于同一个父元素中。最重要的是，我正在显示我的内容，并且我希望通过内容显示背景图像，我通过在我的两个内容元素（#header和{{之间设置边距来完成1}}）。这个描述有点难，但我希望this jsfiddle能够了解我在做什么。
问题是后台显示的链接和引用不可点击，因为点击是针对上面显示的元素（#main）。我知道#header，但这并不好，因为我需要IE支持并且能够解释pointer-events: none;元素中的点击次数。
我想这在某种程度上可归因于this answer中提到的堆叠上下文，但我无法做到正确。如果不在#header上使用负z-index，我将无法获得所需的布局，而#background内的链接可能需要放在更高z-index的父级中。合理的做法可能是将其放在标记中的其他位置，但如上所述，链接与#background内的其他内容相关。是否可以使链接堆叠上下文呈现在其父元素的堆叠上下文“上方”？
代码有点太长了，不能在这里做任何好处，并不是那么复杂，所以请参考前面提到的jsfiddle。