cannot click position fixed button on attachment fixed background

Question

Here is whats's happening:
I have a menu button with position fixed value, and on my page I have a div with a background-attachment that is also fixed.

While I am scrolling down it all works fine until I try to click the button the moment it goes on the fixed background and it does not click

.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>

Does anyone know how to make my button work again? thanks in advance.
Also if you know a way to stop the opacity from applying to the button!

Edit: Thank you to @Huangism for the help!

Answer 1

Change the z-index of the button to a higher level, than it will work.