固定位置div下方的链接可在iPhone上单击

Question

在我们的移动网站上，我有一个固定定位的页脚和一个滚动它的页面。我观察到的问题是，从页脚区域可以点击Feed上的链接，因为这两个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;
}

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

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

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

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

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

是否有一个解决方案，我可以保持.footer div具有固定定位，而.status_updates div具有相对定位，以便.status_udpates中包含的链接不能通过页脚点击？

这是一张可能有助于形象化问题的图片：

Answer 1

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

如果您在滚动内容中添加页边距（页脚高度为45px，滚动内容为margin-bottom: 45px），则内容将出现滚动页脚，但实际上只是滚动到页脚。这样，因为链接在技术上永远不会在页脚后面，所以它永远不会出现点击问题。

当然，这仅适用于您的页脚不透明/半透明或其他设计使您可以“透视”它到下面的内容。

Answer 2

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

Remy Sharp对此问题有good article。