3

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

4

5 回答 5

10

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

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

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

于 2012-08-09T11:18:41.333 回答
1

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

我稍微重组了你的 HTML CSS http://jsfiddle.net/GVL5e/

于 2012-08-09T11:22:03.367 回答
1

此规则无效：

a{
z-index: 2;
}

定位的不是a那个，而是它的父级div。z-index仅适用于定位元素。

你应该做的是：

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

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

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

于 2012-08-09T11:36:15.060 回答
0

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

  1. 不要强迫你的 div 有固定的宽度
  2. 放overflow:hidden;
  3. 消除white-space: nowrap;
于 2012-08-09T11:22:05.520 回答
0

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

相反，尝试将较低的 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;
}

于 2012-08-09T11:22:46.760 回答