<AFrame> 全屏图标如何停留在右下角？答案

【问题标题】：<AFrame> How does icon for fullscreen stay at bottom right edge?<AFrame> 全屏图标如何停留在右下角？
【发布时间】：2017-10-04 16:21:36
【问题描述】：

通过桌面查看时，全屏模式的图标（大致看起来像一副护目镜，可能为 50% 透明灰色和纯白色）始终位于浏览器屏幕的右下方。

定位是这样的，尽管可能会发生破坏性行为，例如更改窗口大小、按下以调出控制台或 fov 更改相机角度，但图标的位置是固定的。

这是如何实现的？

我想构建一个类似的元素（矩形很好）并将其放置在稳定的位置（也许是底部中心），当应用程序以“桌面”模式运行时，它可以通过鼠标单击而不是比通过遮阳板或纸板观看。该应用程序显示 360 度照片。

编辑：（为清楚起见，删除了部分原始问题，扩展问题以获取有关正确使用 CSS 的更多详细信息）

ngokevin 发布的答案建议使用 CSS。

我已经成功地将 CSS 用于 HTML 和简单的 JavaScript 情况。无法让它在 AFRAME 上下文中工作。

在下面的示例中，是更改“底部”属性的几种尝试之一，但它没有效果。（尝试使用 id 而不是 class，使用答案中提供的文字字符串，使用绝对或不使用，各种其他东西。）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS/AFRAME Test</title>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>

  <style>
    .plane { position:absolute; bottom: 100px ! important;}  
  </style>
</head>

<body>
  <a-scene>
    <a-plane class="plane"
       height="1"
       width="3" 
       position="0 0 -4"
       material="color: red">
    </a-plane>    

    <a-camera fov="100" look-controls></a-camera>
</a-scene>

更改“底部”的值无效。例如，是否有可能使用 CSS 使这个矩形始终紧贴中心底部边缘？

是否可以显示上面的编辑，以便使用 CSS 来影响的任何属性，以便我可以看到并使用一个工作示例？

如果“plane”元素需要是2D HTML，我们如何设置重叠a-scene？

【问题讨论】：

标签： aframe

【解决方案1】：

这只是 CSS。您可以覆盖它（例如，.a-enter-vr-button { bottom: auto !important; top: 10px; } 之类的东西）

【讨论】：

这是通过标题中的
使用 CSS developer.mozilla.org/en-US/docs/Learn/…
我在问题中添加了一个非常简短的示例，试图让样式标签起作用。希望简短的回答或快速编辑将阐明您给出的答案。最近，我已经完成了刚刚超过一半的 w3com CSS 教程，并且一直将其用于更简单的情况。您链接的 Mozilla 替代方案看起来也很有用，尽管不是特定的。谢谢你。
我提供的答案给出了右下角图标按钮样式的确切类名。您尝试的是设置一个完全不同的元素 <a-plane> 的样式，因为它不是 2D HTML 元素，所以它不起作用。如果您尝试移动该按钮，请尝试使用我提供的答案，否则您能澄清一下您要做什么吗？
是的，它是一个 2D HTML 元素。您可以右键单击并查看源代码。您可以只创建一个 HTML 元素并用 CSS 覆盖它（即z-index）。没有特定的 A-Frame，只有 HTML/CSS。

【解决方案2】：

我想我会发布一个简单的例子。现在我已经做到了，这似乎很明显，尽管这不是我第一次问的时候。

该示例使用两个“固定”定位的“p”标签。当鼠标悬停在任一标签上时，将调用一个获取和设置属性的函数。 Z-Index 值用于确保“P”标签出现在 a-scene 上方。

因为我是 HTML/CSS 的新手，所以我不得不做一些关于定位的阅读。 Positioning 上的 MDN 链接，以及紧随其后的“实际定位示例”部分非常有帮助。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS/AFRAME Interaction Test</title>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>

  <style>
    p {
      font-size: 24pt;
      text-align: center; 
      width: 35px;
      height: 35px;
      color: white;
      background-color: grey;
      opacity: 0.5;
      position: fixed;
      bottom: -10px;  
      z-index: 1;
    }

    .foo {
      left: 20px;
    }  

    .bar {
      left: 56px;
    }  
  </style>

  <script>
    function recolorPlane() {
      var plane = document.querySelector("#plane");
      var currentColor = plane.getAttribute('material').color;
      if (currentColor == "red") {
        plane.setAttribute('material', {color: 'blue'});
      } else {
        plane.setAttribute('material', {color: 'red'});
      }
    }
  </script>

</head>

<body>
  <p class="foo" onmouseover="recolorPlane()">+</p>
  <p class="bar" onmouseover="recolorPlane()">-</p>

  <a-scene>
    <a-sky material="color: #DDF"></a-sky>
    <a-plane id="plane" height="1" width="3" 
        position="0 0 -4" material="color: blue">
    </a-plane>
  </a-scene>
</body>
</html>

【讨论】：