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

Question

我的设计要求部分占满页面宽度，但内容位于容器内 (article)。考虑到这一点，需要一个 aside float 在需要交互的 full-with 部分之上 (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;
}

之前，您优先考虑“部分”，因此即使“模块”出现在顶部(由于其定位属性)，它的 z-index 意味着它不是实际可访问。

参见 https://jsfiddle.net/aouu1v40/6/演示