Why does layering html text div over a webgl shader background by specifying higher z-index still result in text obstructed by the shader?

I intend to extend a wordpress theme by dynamically creating glsl shaders using the three.js library for JavaScript, and using those shaders embedded into other html elements including as backgrounds for text content possibly.

I have partially working code for using shader as text background, except the text which should be displayed in front of the shader is actually partially blocked by the white pixels of the shader program, even though it has a lower z-index than the the text. I am stuck on this for a project, any working accepted answer shall be appreciated

visual of the problem:
notice that parts of shader (white pixels) block the black text placed in front of shader

document inspector showing div id "text-container" should be in front of canvas per zindex as I understand it):
inspector console

lastly not important probably, but including just in case is the javascript code which places the shader renderer onto the page, and also sets zindex for shader and it's parent text container.

  // set the renderer size and add it to the container
      iReturn.renderer = new THREE.WebGLRenderer();
      iReturn.renderer.setSize(
        shadowEl.getBoundingClientRect().width,
        shadowEl.getBoundingClientRect().height
      );

      //set renderer dom element positioning to absolute, position pixel perfect over its parent container
      iReturn.renderer.domElement.style.position = "absolute";
      iReturn.renderer.domElement.style.top = 0;
      iReturn.renderer.domElement.style.left = 0;

      //position behind parent's contents using zindex
      iReturn.renderer.domElement.style.zIndex = "1";
      

      //shadow element should have higher zindex than it's child shader renderer which is "1" zindex
      shadowEl.style.zIndex = "2";
      //transparent background, only text displays
      shadowEl.style.backgroundColor = "transparent";
      shadowEl.style.position = "relative";
      shadowEl.appendChild(iReturn.renderer.domElement);

Resolved. by placing shader canvas in the same parent container as the div, so zindex scope would be relevent.