Css 覆盖jQuery按钮的全屏画布

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

:-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按钮的位置吗？

---

我在这里兜圈子，所以任何建议或见解都是非常受欢迎的。

你必须确保你想要看到的元素是

gameCanvasDiv

元素的子元素（假设你请求全屏模式的元素）

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

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

---

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

我已经做到了这一点。花的时间比我想象的要长。但我只是在学习CSS。我很难将类选择器与：-moz全屏选择器（伪类？）联系起来。需要一个gui，因此不能不损失一些性能。：-moz全屏画布{}也访问画布：-moz全屏.gameGUI{}访问我的gui类