Javascript 有两个全宽HTML元素重叠，但都是交互的

我有一个设计，要求页面的所有部分都是全宽的，但内容都在一个容器中（

文章

）。考虑到这一点，需要一个浮动在完整部分之上的旁白，其中的部分需要交互（

旁白

）

article

和

side

都有需要交互的内容。现在的问题是一个必须优先于另一个，目前，我已经为

文章

解决了这个问题，但这并不理想

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

---

谢谢。

您只需切换z索引，现在两个区域中的链接都可以单击

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

之前，您对“部分”进行了优先级排序，因此即使“模块”看起来位于顶部（由于其定位属性），其z索引意味着它实际上无法访问

---

请参见演示

您只需切换z索引，现在两个区域中的链接都可以单击

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

之前，您对“部分”进行了优先级排序，因此即使“模块”看起来位于顶部（由于其定位属性），其z索引意味着它实际上无法访问

---

查看演示

不知道为什么我最初没有尝试，但效果非常好！谢谢。事实上，再测试一点，它就不起作用了。当旁侧为

位置：绝对时，它将工作但当其更改为
位置时：固定问题恢复为：（恕我直言，它适用于你在问题中给出的代码，我不能猜测你将来决定做的任何更改。如果你对不同版本的代码有问题，你真的需要问一个新问题，因为这是一个不同的场景。这个答案应该被接受为基于原始信息的工作离子已给出，谢谢：-）。因此基于您提供的解决方案（）它在初始状态下工作，位置是绝对的。如果你向下滚动页面到左边的文本与粉色模块中的链接对齐的位置，位置固定的位置仍然会断开。我正在Chrome v66和Firefox v60上测试，代码没有任何更改。因此有两种解决方案。一种是使用JS的
position:abso琵琶；
全程（）。另一个纯CSS使用
位置：sticky；
由另一个人提供（）不知道为什么我最初没有尝试，但它工作得很好！谢谢。实际上，再测试一点，它就不起作用了。当旁白是
position:absolute；
时它会起作用；
但当它变为
position:fixed；
时问题又恢复了：（恕我直言，它适用于你在问题中给出的代码，我不能猜测你将来决定做的任何更改。如果你对不同版本的代码有问题，你真的需要问一个新问题，因为这是一个不同的场景。这个答案应该被接受为基于原始信息的工作离子已给出，谢谢：-）。因此基于您提供的解决方案（）它在初始状态下工作，位置是绝对的。如果你向下滚动页面到左边的文本与粉色模块中的链接对齐的位置，位置固定的位置仍然会断开。我正在Chrome v66和Firefox v60上测试，代码没有任何更改。因此有两种解决方案。一种是使用JS的
position:abso琵琶；
全程（）。另一个纯CSS使用
位置：sticky；
由另一个人提供（）