position:sticky 页脚包含按钮的问题

Question

我的页面底部有一个浮动的 div，它由两个按钮组成。为了使浮动按钮在页脚处持续显示，我使用了 position:sticky

我面临的问题是，当按钮漂浮在页面中的其他按钮上方时，对页脚中按钮本身的任何点击都会被忽略，而是会记录对底层按钮的点击。页脚按钮的点击操作被忽略。

考虑到浮动页脚的高度，我尝试在按钮不可见时注销点击事件，但即使那样也不起作用。有办法解决这个问题吗？

Answer 1

原因是当页脚按钮重叠时，position sticky 实际上并没有将页脚按钮放在另一个按钮之上。要实现您想要的效果，只需将 z-index 放在粘滞按钮（或本例中的页脚）

.sticky-button {
 position: sticky;
 z-index: 1000;
}

这将使粘滞按钮覆盖内容，当您点击时，粘滞按钮中的功能应该被触发