Question

我有两个绝对定位的div元素，它们彼此相邻放置。第一个div元素具有overflow: visible和一个具有长内容的链接，该链接在相邻的div元素之上流动。我试图点击相邻div的链接，没有运气 - 在Chrome和Firefox中。这适用于IE9。一些代码示例将解释我想要做的事情 -

<div>
  <a href="#">Reeeeeeeeeeeeeaallllllly Looooon Liiink Teeeext</a>
</div>
<div class="two">
</div>

样式表：

div{
position: absolute;
height: 50px;
width: 80px;
border: 2px solid;
overflow: visible;
white-space: nowrap;
z-index: 1;
}
.two{
left:82px;
}
a{
z-index: 2;
}

jsfiddle：http://jsfiddle.net/yzSwL/1/

有什么建议吗？我认为z-index可能有所帮助，但没有。当鼠标位于第二个div上时，链接文本也无法选择。

提前致谢。

更新

实际上我的场景比我放手更复杂，因为我没有意识到答案会在哪里。指针事件看起来是最干净的解决方案，但遗憾的是我无法使用它，因为所有的div都可能包含链接。

更现实的jsfiddle：http://jsfiddle.net/yzSwL/6/

只是为了解释我想要得到的东西 - 我正在制作一个带有小时网格的计划应用程序，其中有很多定位的div彼此相邻。每个div都可以有一个链接。链接的宽度是约会的长度。

Answer 1

您可以通过为类.two

设置pointer-events:none;来执行此操作

指针想要专注于顶部div，但如果你告诉它不要，那么它将转到后面的div。

工作小提琴：http://jsfiddle.net/yzSwL/2/

Answer 2

在IE 9及更低版本以及Opera中使用pointer-events时会遇到问题。

我稍微重构了您的HTML CSS http://jsfiddle.net/GVL5e/

Answer 3

此规则无效：

a{
z-index: 2;
}

这不是定位的a，而是其父div。 z-index only applies to positioned elements.

你应该做的是：

div{
    ...
    z-index: 2;
}
.two{
    ...
    z-index: 1;
}

http://jsfiddle.net/yzSwL/4/

另请注意，即使您要将position: absolute添加到a以使z-index为其工作，它仍然仍然不会.two。这只会使它位于其定位的父div内的其他元素之上（其堆叠上下文）。

Answer 4

有很多解决方案，但你必须改变风格：

请勿强制您的div具有固定宽度
设置overflow:hidden;
删除white-space: nowrap;

Answer 5

在您的代码中，您为两个DIV分配相同的z-index。

相反，尝试将较低的z-index分配给第二个DIV。



div{
position: absolute;
height: 50px;
width: 80px;
border: 2px solid;
overflow: visible;
white-space: nowrap;
z-index: 10;
}
.two{
left:82px;
    z-index: 5;
}

div{ position: absolute; height: 50px; width: 80px; border: 2px solid; overflow: visible; white-space: nowrap; z-index: 10; } .two{ left:82px; z-index: 5; }

overflow：绝对位置元素旁边的可见链接不可点击

5 个答案: