如何在 A-Frame 上放置 HTML 元素答案

【问题标题】：How to position HTML elements on top of A-Frame如何在 A-Frame 上放置 HTML 元素
【发布时间】：2020-10-24 02:27:53
【问题描述】：

我正在尝试定位 HTML 元素以在 A-Frame 之上构建一个 UI，该 UI 可以在桌面和移动设备上单击或触摸。

【问题讨论】：

标签： aframe

【解决方案1】：

任何 HTML 元素都可以通过适当的样式覆盖在 A-Frame 之上。至少您需要设置position: absolute; 和z-index: 9999; 以便它呈现在顶部。下面是在 A-Frame 画布上呈现的简单 <button> 示例：

.button {
  width: 200px;
  height: 100px;
  position: absolute;
  top: calc(50% - 300px);
  left: calc(50% - 50px);
  background-color: magenta;
  z-index: 9999;
  line-height: 100px;
  text-align: center;
  color: white;
}

Glitch with code illustrating

另一种方法是将 A-Frame 嵌入 iframe 并将您的 UI 放置在它之上。任何 CSS 定位技术都将适用，并且不在此答案的范围内。

【讨论】：