1

在我们的移动网站上，我有一个固定位置的页脚和一个在其下方滚动的提要。我观察到的问题是提要上的链接可以从页脚区域单击，因为这两个 div 重叠。

页脚：

.footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 1030;
height:45px;
.background-image-gradient (@topFooterColor, @bottomFooterColor);
box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.45);
background-repeat: repeat-x;
text-align:center;
border-top: 1px solid @topFooterBorder;
}

提要包含在一个名为 status_updates 的 div 中：

.status_updates {
border-left:0px;
margin-top:0px;
margin-bottom:10px;
}

在状态更新 div 中，有指向站点上其他位置的链接（人员资料、状态更新等）。我观察到的问题是这些链接仍然可以通过页脚（在屏幕底部 45 像素处）单击。

我尝试过使用 .status_updates 的 z-index，甚至将其设置为 z-index:-1，但这仍然不起作用。我的理解是页脚的 z-index 被忽略，因为它具有固定的定位。

我知道如果我将 .status_updates div 设为绝对值，顶部：40px（我的固定位置页眉的高度）和底部：45px（我的固定位置页脚的高度），并且我的页脚绝对值低于 .status_udpates div将解决问题，因为 div 不再重叠。但是，此解决方案将需要我重组网站上的许多其他页面。

有没有一种解决方案可以让 .footer div 保持固定定位，而 .status_updates div 保持相对定位，这样 .status_udpates 中包含的链接不能通过页脚点击？

这是一张可能有助于可视化我的问题的图片： 可滚动提要上的链接可通过页脚点击

4

2 回答 2

1

正如 Torsten 上面提到的，这是一个已知的浏览器问题。我有类似的情况并解决如下。

如果您在滚动内容中添加一个边距底部，即页脚的高度（例如，页脚的高度是 45px，margin-bottom: 45px在滚动内容上），那么内容看起来会滚动到页脚后面，但实际上只是滚动到页脚。这样，由于链接在技术上永远不会位于页脚后面，因此它永远不会出现点击问题。

当然，这仅在您的页脚不是透明/半透明或以其他方式设计以使您可以“看穿”下面的内容时才有效。

于 2012-08-02T22:02:39.783 回答
0

这是一个已知的错误。如果滚动以编程方式发生，则可以单击固定元素。

Remy Sharp 有一篇关于这个问题的好文章。

于 2012-08-02T22:01:04.857 回答