覆盖 jQuery 按钮的全屏画布

Question

我一直在开发 webgl 游戏，并且全屏切换适用于 chrome 和 firefox。我一直在使用 dat.gui 来控制这个游戏的输入。它基于 jQuery-ui。事实上，在触发全屏事件后，我无法让任何子元素出现。行为是所有孩子都被清除了，

:-webkit-full-screen {
    top:0px;
    position:absolute;
    width: 100% !important;
    background-color:red;
} 


:-moz-full-screen body {
  width: 100% !important;
   background-color:red;
}

:full-screen body{
    width: 100% !important;
    background-color:red;
}

#navi {
    position:relative;
    right:10px;
    top:10px;
}

并且使用这些元素，其中画布是动态创建并附加到gameCanvasDiv的。而 dat.gui 附加到“navi”。

<div id="gameCanvasDiv"></div>


<div id ="vSlider0"></div>
    <div id ="vSlider1"></div>

    <div id ="hSlider0"></div>

    <span id="navi" ></span>

我可以在全屏后使用 css 来控制 jQuery ui 按钮的位置吗？ 我在这里绕圈子，所以非常欢迎任何建议或见解。

Answer 1

您必须确保要显示的元素是 gameCanvasDiv 元素的子元素（假设这是您请求全屏模式的元素）。

这意味着您需要将这些滑块放在其中。您可以使用 CSS 控制它们的位置，也可以使用 JavaScript 通过它们的属性来设置它们的位置（即，在全屏时设置一个类，在非全屏时设置一个不同的类 - 你会明白的）。

通过在全屏时使用 z-index 和绝对/固定位置可以帮助您将它们置于画布元素的顶部。

请注意，如果将元素放在画布顶部，画布元素的性能会降低。