在帆布頂部有元素而不會推動畫布--Javascript

Question

所以我有一個簡單的JavaScript，在一個佔據整個屏幕的畫布上上下跳動一個球。我想在屏幕頂部添加簡單的值滑塊。問題是當我創建它們時，它們將自己放在畫布的頂部並將畫布向下推。所以基本上現在有了我不想要的滾動條，並且您無法同時看到整個球動畫和滑塊（不縮小）。我怎樣纔能有這些滑塊而不需要滾動條。

這裏是我的代碼初始化畫布

<canvas></canvas> 

<script type="text/javascript"> 

    var canvas = document.querySelector('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var W = canvas.width = window.innerWidth; 
    var H = canvas.height = window.innerHeight; 

</script> 

這裏是我的代碼，創建一個滑塊

<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" /> 
<span id="range">0</span> 

<script type="text/javascript"> 

    function showValue(newValue){ 
     document.getElementById("range").innerHTML=newValue; 
    } 

</script> 

您可以查看工作的例子，而不滑here。我基本上想要這個確切的頁面，但頂部有一個滑塊。

您可以使用滑塊here查看工作示例。你可以看到滾動條很煩人。

Answer 1

看看這個小提琴：http://jsfiddle.net/x0cr3ofk/

，如果你的位置你的元素絕對你能夠堆疊起來。

我加了一些CSS的代碼，有助於擺脫滾動條：

.stacked_slider { 
    position: absolute; 
    top: 10px; 
    left: 1px; 
    z-index: 7; 
} 

.canvas_class { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

和HTML：

<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" class="stacked_slider"/> 
<span id="range">0</span> 
<canvas class="canvas_class">  
</canvas> 

必要

您的JS沒有變化