I have

.grid-texture {
  background-size: 4px 4px;
  background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.btn {
  position: absolute;
  left: 50%;
  top: 50%;
}

<div class="grid-texture"></div>
<div class="btn">
  <button class="btn">Button</button>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And I got this:

So, button becomes unavailable for use.

And now question: How do I make it so that I can push the button through the grid-texture?
OR
How to "overlay" the grid texture on top of all html elements, while maintaining the functionality of buttonsa and etc?

CodePudding user response：

Add pointer-events: none; to grid-texture

.grid-texture {
  background-size: 4px 4px;
  background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
  position: relative;
  z-index: 1;
  min-height: 100vh;
  pointer-events: none;
}

.btn {
  position: absolute;
  left: 50%;
  top: 50%;
}

<div class="grid-texture"></div>
<div class="btn">
  <button class="btn">Button</button>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

just add z-index & background-color:transparent; to button css.

.grid-texture {
  background-size: 4px 4px;
  background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index:9;
background-color:transparent;
}

<div class="grid-texture"></div>
<div class="btn">
  <button class="btn">Button</button>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>