Quiero superponer un elemento de section que ocupe toda la ventana gráfica encima de un elemento de canvas . El elemento canvas muestra webgl que interactúa con la ubicación del mouse a través de javascript. Desafortunadamente, el elemento de section está bloqueando el javascript para que no reconozca la ubicación del mouse porque no entra en contacto con el lienzo.
Intenté las siguientes soluciones: agregué pointer-events: none; a los elementos section y h1 , pero no ayudó.
Es importante que el elemento de section ocupe toda la ventana gráfica porque tengo la intención de agregar animaciones css y un gráfico dentro de él más adelante que debe estar centrado usando flexbox.
¿Es posible lo que estoy tratando de hacer y, de ser así, cómo puedo lograrlo?
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/webgl-fluid@0.0.4/dist/webgl-fluid.umd.min.js'></script> <script src="js/script.js"></script> </body> </html>Si establece una posición absoluta en la sección, los eventos del mouse no se capturan.
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/webgl-fluid@0.0.4/dist/webgl-fluid.umd.min.js'></script> <script src="js/script.js"></script> </body> </html>