67. UI交互界面与Canvas画布叠加

插入div元素

在课程课件演示文件.html中插入一个div元素，你会看到地址元素影响canvas元素布局

<div style="color: #ff0000;">红色</div>

canvas画布绝对定位

如果你想设置threejs Canvas画布的style属性，可以通过renderer.domElement访问。

// canvas画布绝对定位
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';

这时候你会发现你插入的div元素看不到了，这涉及到z-index的CSS布局知识点，具体说就是当两个HTML元素位置重合，谁在上谁在下的问题。

设置z-index

通过z-index改变HTML元素上下叠加关系，如果你忘记了CSS该属性，可以复习下。

renderer.domElement.style.zIndex = -1;

<div style="color: #ff0000;z-index:2;position: relative;">红色</div>

注意默认的定位position: static;设置z-index无效。

插入的div元素绝对定位

不设置three.js Canvas元素style，插入的div元素绝对定位，这样也可以把div元素叠加到threejs Canvas花画布上

<div style="color: #ff0000;z-index:2;position: absolute;">红色</div>