Question

我在css属性clip旁边使用固定位置元素来制作一个很酷的滚动/分页效果。

这一切都很好但我的问题是我无法点击我的链接。

我可以看到固定元素相互重叠导致问题，但我无法弄清楚如何修复它。

我已尝试更改容器和锚标记上的z-index值而没有运气。

这是一个小提琴：http://jsfiddle.net/9ukyrbc0/

如果有人能提供帮助那就太棒了！

干杯！

Answer 1

问题出在.fixed-container：

.fixed-container {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none; <-----
}



pointer-events: none;

在该容器内根本不会触发指针事件...因此链接不活动。

此处更多内容...... https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 2

所以我已经弄明白了，但我无法解释它。

要做的第一件事就是删除pointer-events: none所以感谢@manhatmanich发现那个。

这使得第一个链接可以点击而不是其他链接，它看起来像是一个z-index问题，但更改z-index值不起作用。

因此，在玩游戏时，我尝试从锚标记和BOOM中移除绝对位置，所有链接都是可点击的。

你可以在这里看到一个小提琴：http://jsfiddle.net/9ukyrbc0/10/

老实说，我不明白这是如何解决这个问题的，但确实如此！

Answer 3

我遇到了同样的问题，这里给出的代码没有pointer-events: none;给我工作。唯一的问题是我的固定位置元素中也有链接，现在这些链接不起作用。

使用css剪辑在固定位置div后面无法链接的链接

3 个答案: