有两个全宽 HTML 元素重叠但都可以交互

Question

我的设计要求部分占整个页面宽度，但内容位于容器内 (article)。考虑到这一点，需要在需要交互的完整部分上方浮动一个旁白 (aside)。

article和side都有需要互动的内容。那么问题是一个必须优先于另一个，目前，我已经选择 article，但这并不理想。

https://jsfiddle.net/WolfieZero/aouu1v40/3/

有什么想法吗？我想看看它是否可以先用 CSS 修复，但认为这可能是 JS 的工作（在这种情况下为 jQuery）。

谢谢。

Answer 1

你只需要切换z-indexes，现在两个区域的链接都可以点击了。

.module {
    z-index: 2;
}
section > div {
    z-index: 1;
}

之前，您优先考虑 "section"，因此即使 "module" 出现 位于顶部（由于其定位属性），它的 z-index 意味着它实际上不可访问。

有关演示，请参阅 https://jsfiddle.net/aouu1v40/6/