无法单击附件固定背景上的位置固定按钮答案

【问题标题】：cannot click position fixed button on attachment fixed background无法单击附件固定背景上的位置固定按钮
【发布时间】：2021-06-26 00:28:07
【问题描述】：

这是发生了什么：
我有一个位置固定值的菜单按钮，在我的页面上我有一个带有背景附件的 div，它也是固定的。

当我向下滚动时，一切正常，直到我尝试在按钮进入固定背景时单击按钮并且它没有单击

.page {
  width: 100%;
  transition: 0.5s;
  height: 1900px;
}


/*backgroun image*/

.unscrollable {
  background-color: grey;
  width: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
}

.page div.content {
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
}

  <div style="width:80%">
    <button style="position:fixed;cursor:pointer; top: 0">click</button>
  </div>
  <div class="page" id="page">
    <div class="unscrollable" style="min-height:105%;"></div>
  </div>

有人知道如何让我的按钮再次工作吗？在此先感谢。
另外，如果您知道阻止不透明度应用于按钮的方法！

编辑：感谢@Huangism 的帮助！

【问题讨论】：

您需要提供足够的代码来重现该问题。据我所知，您的背景图像设置应该与按钮无关。也许是它所在的 div
@Huangism 我尝试运行我刚刚发送的示例代码，它实际上为我重现了这个问题
上面的代码只在空白页上显示了一个按钮。你至少需要从你的永恒 css 文件中包含 css，没有人可以访问它
重现错误所需的 css 代码就在那儿，您只需复制粘贴它，也可以放 background-color:grey 而不是 background-image: url("images/shrine.png"); 。现在，如果您看到按钮在开始时可以正常工作，但如果您滚动到屏幕为灰色的位置，它就会停止工作。
您的代码只产生一个带有按钮的空屏幕。有一个运行代码 sn-p 按钮，单击它即可看到所有内容。我已经尝试使用固定高度而不是 105%。您需要做的就是给按钮 z-index: 1;

标签： html css css-position

【解决方案1】：

将按钮的 z-index 更改为更高的级别，而不是正常工作。

【讨论】：