如何让HTML按钮显示在AR.js内容上方不被遮挡？

你的问题核心是HTML结构不规范加上AR场景的层级影响，导致按钮被遮挡。以下是具体解决步骤：

1. 修正HTML结构 #

你把<button>放在了<body>标签外面，这不符合HTML规范，浏览器会自动调整元素位置，可能导致按钮的层级计算异常。必须把按钮放到<body>内部，且放在AR场景标签的前面（确保渲染顺序优先）。

2. 强化按钮的层级控制 #

虽然你设置了z-index，但可以明确指定按钮的top、left属性，同时确保AR场景的容器不会覆盖按钮。AR.js的<a-scene>默认会生成全屏的canvas，我们需要让按钮的层级绝对高于它。

修改后的完整代码 #

HTML部分

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>

<body>
    <!-- 按钮放到body内部，场景之前 -->
    <button>Inverse</button>
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='hiro'></a-marker-camera>
    </a-scene>
</body>

CSS部分

.inversed {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
button {
  position: fixed;
  z-index: 9999; /* 足够大的层级，确保高于AR场景 */
  top: 10px; /* 明确距离顶部的位置，避免被边缘截断 */
  left: 10px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
}

JavaScript部分

$("button").click(function () {
  $("html").toggleClass("inversed");
});

关键说明 #

• HTML结构修正后，浏览器会正确识别按钮的位置和层级；
• 明确设置top、left属性，避免按钮被浏览器默认样式或场景边缘遮挡；
• 足够大的z-index值（如9999）确保按钮始终在AR场景的canvas上方。

内容的提问来源于stack exchange，提问作者Aidan Young