使用未定位的畫布圖層使用位置：絕對

Question

我試圖使用此示例： http://html5.litten.com/using-multiple-html5-canvases-as-layers/ 創建多個html5圖層（實際上只需要2個）用於背景，然後是該背景上的動畫。

的問題是例子，和許多其他的解決方案，建議使用的z-index等分層畫布似乎都在定位左邊畫布：0和top：0的絕對位置。

例如： html5 - canvas element - Multiple layers html5 - canvas element - Multiple layers

不過，我想做些什麼，是有位置是動態的，但總是那麼的兩個畫布在彼此的頂部分層。

什麼我已經到目前爲止做的是這樣的：

<div id="canvasesdiv" align=center; style="text-align:center; float:center"> 
     <canvas id="bottomlayer-background" style="z-index: 1; border:1px dotted;" align=center> 
     This text is displayed if your browser does not support HTML5 Canvas. 
     </canvas> 
     <canvas id="toplayer-movingstuff" style="z-index: 2; border:1px dotted; position:absolute; left:530px; top:83px"> 
     This text is displayed if your browser does not support HTML5 Canvas. 
     </canvas> 
</div> 

這種方法的問題是，我不得不手動找出其中底層的左上角是，然後輸入到這頂層。但是這種情況只適用於一臺瀏覽器，一臺顯示器，全屏等。顯然，這是不可行的。

當我試圖同時擁有僅僅是ALIGN =中心，那麼會發生什麼是油畫出現並排側，而不是分層在彼此的頂部。

當我嘗試爲兩者做絕對位置時，問題在於窗口中的其他東西，最初在畫布下面（即文本，表格等）突然出現在畫布下方。

有沒有其他人能夠解決這個問題？

謝謝！

Answer 1

絕對定位的工作方式是目標元素絕對位於其最接近的定位祖先內。這意味着如果包含的div位於絕對或相對位置，則目標元素將絕對位於包含div內。

注意：你並不真正需要的z-index的，除非你已經亂用z-index別的地方

另注：如果你希望你的畫布的行爲，設置寬度和高度它們屬性，否則事情會變得很奇怪。

http://jsfiddle.net/mobidevelop/4WDJz/

HTML

<p>Other Content</p> 
<p>Other Content</p> 
<p>Other Content</p> 

<div id="contain"> 
     <canvas id="surface1" width="480" height="160"> 
     </canvas> 
     <canvas id="surface2" width="480" height="160"> 
     </canvas> 
</div> 

<p>Other Content</p> 
<p>Other Content</p> 
<p>Other Content</p>​ 

CSS：

#contain { 
    width: 480px; 
    height: 160px; 
    margin: 0 auto; 
    position: relative;  
} 

#surface1, 
#surface2 { 
    top: 0; 
    left: 0; 
    position: absolute; 
} 

而且，好措施，JS：

var surface1 = document.getElementById('surface1'); 
if (surface1 != null) { 
    if (surface1.getContext) { 
     var context = surface1.getContext("2d"); 
     if (context != null) { 
      context.fillStyle = "rgba(255,0,0,0.25)"; 
      context.fillRect(0,0,480,160); 
     } 
    } 
} 
surface2 = document.getElementById('surface2'); 
if (surface2 != null) { 
    if (surface2.getContext) { 
     var context = surface2.getContext("2d"); 
     if (context != null) { 
      var x = 0; 
      context.fillStyle = "rgba(0,0,0,1.0)"; 
      last = new Date(); 
      setInterval 
      (
       function() 
       { 
        var now = new Date(); 
        var del = (now - last)/1000.0 
        last = now; 

        context.clearRect(0,0, 480, 160); 
        context.fillRect(x, 10,32,32);     
        x += 10 * del; 
        if (x > 480) { 
         x = -32; 
        } 
       }, 15 
      );    

     } 
    } 
} 

Answer 2

#canvasesdiv{margin:0 auto; position:relative; width:300px;} 

#bottomlayer-background, #toplayer-movingstuff{ 
    position:absolute; 
    z-index: 1; 
    border:1px dotted blue; 
    height:200px; 
    width:300px; 
} 
#toplayer-movingstuff{ 
    z-index: 2; 
    border:1px solid red; 
} 

Working Fiddle

以上應該工作。只需給含有元素的相對位置，這將使子元素與absolute相對於父元素定位。