Javascript WebGL动画下的HTML内容不可单击

我试图弄明白为什么WebGL动画下面的HTML内容不能被单击或与之交互

请看

当前，包含动画的div设置为：

.webgl-glitch {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    opacity: 0.5;
}

…否则它将根本不显示

我试过设置一个z索引：1；属性，但这似乎没有帮助

以下是标题的HTML部分，包括动画div：

<!-- Begin Header animation -->
<div class="webgl-glitch"></div>
<!-- End Header animation -->


<header id="principalheader" class="centerContainer aligncenter fullScreen tintBackground stonebackground" style="z-index:1">
    <div>
        <div class="container">
            <!-- Site logo-->
            <a href="#" class="logo"><img alt="KUBO" src="img/logo.png"></a>
            <!-- Site Principal slogan-->
            <h1>Digital Exploration for the the digital age</h1>
            <!-- Site Resume-->
            <div class="row">
                <div class="hidden-xs col-md-10 col-md-offset-1">
                    <h2>CRAFT experiences that <strong>defy</strong> expectations<br/>
                        CREATE from the the twin <strong>virtues</strong> of inspiration and innovation<br/>
                        BEAUTY in simplicity and complexity <strong>combined</strong> for the best of both worlds</h2>
                </div>
                <div class="col-md-10 col-md-offset-1">
                    <a class="fa fa-angle-down" href="#" data-scrollto="#about"></a>
                </div>
            </div>
        </div>
    </div>
</header>

数字时代的数字探索
打造挑战期望的体验

从灵感和创新的孪生美德中创造

简单和复杂的美结合在一起，达到两个世界的最佳效果

我注意到的另一件事是，如果我将.web glitch animation div包装在HTML5画布元素中，它也不会显示？为什么会这样

---

目前我在CSS中画布上的唯一属性是宽度：100%

这不是因为WebGL动画，而是因为

.WebGL的小故障

。将一个HTML元素放在另一个HTML元素的上面可以防止单击它下面的任何内容；透明与否无关紧要

至于

：您在

元素中放置的任何内容都应该是不支持该元素的浏览器的占位符；如果您的浏览器支持它，那么

中的任何内容都将被忽略；所以，如果你有这样的东西：

<canvas>
    <h1>Sorry, but your browser does not support the canvas element.</h1>
</canvas>

很抱歉，您的浏览器不支持canvas元素。

---

在不支持画布的浏览器上，将向用户显示消息“抱歉，您的浏览器不支持画布元素”；另一方面，支持画布的浏览器将不会显示画布标记内的元素，并允许画布正常运行。

Hmm，有趣。。。那么，您知道如何将.webgl glitch div放在标题容器下面并仍然正确显示吗？我刚刚试着把它放在下面，但现在动画不再显示。。。（请参阅：）我不确定我是否完全理解您关于canvas元素的回答。顺便说一句……您是说canvas元素仅用于浏览器回退特定代码吗？嗯，没关系。。。我想我明白了。已将.webgl故障移到标题内部，但就在容器上方。。。文本是不可选择的（我不认为这有什么大不了的），但是箭头现在看起来是可以点击的；我编辑了答案并添加了一个示例。