Is it possible to place an element that takes up the full viewport over a canvas without blocking th-CodePudding

I want to overlay a section element that takes up the entire viewport on top of a canvas element. The canvas element is displaying webgl that interacts with the mouse location through javascript. Unfortunately, the section element is blocking the javascript from recognizing the mouse location because it doesn't come in contact with the canvas.

Attempted the following solutions: I added pointer-events: none; to the section and h1 elements, but it didn't help.

It is important that the section element take up the entire viewport because I intend to add css animations and a graphic inside of it later that must be centered using flexbox.

Is what I'm trying to do even possible and if so, how can I achieve this?

window['webgl-fluid'].default(document.querySelector('canvas'))

* {
  margin: 0;
  padding: 0;
}

html {
  color: gray;
  font-size: 2rem;
}

section {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
}

h1 {
  color: #fff;
  pointer-events: none;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<html>

<body>
  <section>
    <h1>WebGL Fluid Simulation</h1>
  </section>
  <canvas></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
  <script src='https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js'></script>
  <script src="js/script.js"></script>
</body>

</html>

CodePudding user response：

If you set position absolute on the section the mouse events are not captured.

window['webgl-fluid'].default(document.querySelector('canvas'))

* {
  margin: 0;
  padding: 0;
}

html {
  color: gray;
  font-size: 2rem;
}

section {
  position: absolute;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
}

h1 {
  color: #fff;
  pointer-events: none;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<html>

<body>
  <section>
    <h1>WebGL Fluid Simulation</h1>
  </section>
  <canvas></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
  <script src='https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js'></script>
  <script src="js/script.js"></script>
</body>

</html>