位置问题：包含按钮的粘性页脚答案

【问题标题】：Issue with position:sticky footer containing buttons位置问题：包含按钮的粘性页脚
【发布时间】：2020-09-08 05:57:03
【问题描述】：

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

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

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

【问题讨论】：

能否添加一个快速演示，以便我们更轻松地提供帮助？
我会尝试在这里添加截图
如果您可以在这里设置一个 sn-p（或 CodeSandbox、stackblitz、CodePen 或其他站点上的演示），那将是最好的。请注意，如果您离开现场进行演示，您还需要在此处包含代码的相关部分。

【解决方案1】：

原因是当它们重叠时，位置粘性实际上并没有将页脚按钮放在另一个顶部。要实现您想要的，只需将 z-index 放在粘性按钮（或本例中的页脚）上

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

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

【讨论】：

我确实尝试过，但没有奏效。我什至将底层按钮的 z-index 设置为较小的值，但这不起作用。
您是否确保您设置的 z-index 未被任何其他代码覆盖。您可以通过将鼠标悬停在 chrome 开发工具中快速检查它们并查看其样式中的 z-index 是否正确
是的，有帮助！我在 z-index 之后添加了!important，问题就消失了。非常感谢！