Полноэкранный холст с наложенными кнопками jQuery

Question

Я работаю над игрой в стиле webgl и имею полноэкранный режим для работы с хромом и 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; 
} 

И используются эти элементы, где холст динамически создается и добавляется к thegameCanvasDiv. Пока 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-индекс и абсолютные/фиксированные позиции, когда полноэкранный режим может помочь вам получить их поверх элемента холста.

Помните, что если вы поместите элементы поверх холста, производительность элемента холста будет уменьшена.