How to position HTML elements on top of A-Frame

Question

I'm trying to position HTML elements to build a UI on top of A-Frame that can be clicked or touched on desktop and mobile devices.

Answer 1

Any HTML element can be overlayed on top of A-Frame by styling appropriately. At a minimum you will need to set position: absolute; and z-index: 9999; so it renders on top. Below an example of a simple <button> rendered over the A-Frame canvas:

.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

An alternative method would be embedding A-Frame in an iframe and position your UI on top of it. Any CSS positioning techniques will apply and are out of the scope of this answer.