溢出：在绝对位置元素旁边时可见链接不可点击答案

【问题标题】：overflow: visible link not clickable when next to absolute position element溢出：在绝对位置元素旁边时可见链接不可点击
【发布时间】：2012-08-09 19:47:55
【问题描述】：

我有两个绝对定位的 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 都可以有一个链接。链接的宽度就是约会的长度。

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过为 class .two 设置 pointer-events:none; 来做到这一点

指针想要聚焦在最上面的 div 上，但如果你告诉它不要，它会转到后面的 div。

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

【讨论】：

然后将一个类应用到带有{ pointer-events: all; } 的链接。如此处所示：jsfiddle.net/yzSwL/7
不错！谢谢。以前从未听说过指针事件。我想这解释了为什么它在 IE9 中有效，而不是在其他环境中。

【解决方案2】：

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

我对您的 HTML CSS http://jsfiddle.net/GVL5e/ 进行了轻微重组

【讨论】：

实际上它已经在 IE9 中工作，正是因为这个原因，不支持指针事件。
这是一个很好的解决方案。我使用您的方法在绝对位置拉伸图像上将相对定位的 div 置于前面。那个 div 的所有链接和按钮元素都是不可点击的。谢谢。

【解决方案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（它的堆叠上下文）内的其他元素之上。

【讨论】：

【解决方案4】：

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

不要强迫你的 div 有固定的宽度
设置overflow:hidden;
删除white-space: nowrap;

【讨论】：

我需要所有这些 CSS 规则来进行布局。我想保持相同的布局，只需使链接可点击。

【解决方案5】：

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

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

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

【讨论】：