javascript - 将一个 div 类放在 three.js 场景之上以创建一个 gui

Question

我如何在我的 three.js 类之上放置一个 div 类来创建 html 按钮。我有一个 div 当前充当我的场景的容器。然后我想在那个场景的顶部放置更多的 div 类来创建图形用户界面和按钮。当前正在运行的代码如下:

<div id="world">
	<div id="test">
		<button>hi</button>
	</div>
</div>

这会在页面顶部放置一个按钮，然后是场景，而不是场景内部的按钮。

Answer 1

要放在顶部的 div 必须有 position: absolute 和 z-index 高于底部 div。例如:

<div id="world">
    Three.js Container
    <div id="test">
        <button>Button</button>
    </div>
</div>

还有 CSS:

#world { 
    width: 100%;
    height: 150px;
    background-color: red;
}

#test {
    position:absolute;
    z-index:5;
}