キャンバスの背景がアンカーを解除不可にする

Question

HTML5キャンバス要素で動的な背景を作成することが可能かどうかについて、さまざまな証拠があります。ここでは正常に行われているようだ男だ：

http://radikalfx.com/files/anibg/

私は背景として私のcanvas要素を首尾よく配置されているが、それはunclickable私のリンクをレンダリングしています。ここでは状況があります：

HTML：

<div id='container'> 

... other header stuff ... 
    <canvas id='background'> 
    </canvas> 

    <!-- Can't touch this *MC Hammer Shuffle* --> 
    <a href='#'>test</a> 
... footer stuff ... 

</div> 

CSS：

/* Everything's z-index is now 1 */ 
#container 
{ 
position: relative; 
min-height:100%; 
width:100%; 
z-index:1; 
} 

/* Make the canvas z-index 0 */ 
#background 
{ 
position: absolute; 
top: 0; 
width:100%; 
height:100%; 
z-index: 0; 
} 

はJavaScript：

// Onload Draw an ellipse 
// I've got jCanvas installed (jQuery plugin) to use the drawArc() method 
// This bit can be replaced with whatever test code you want. 
function load() 
{ 
init_canvas(); 
$("canvas").drawArc({ 
     fillStyle: "black", 
     x: 100, y: 100, 
      radius: 50 
    }); 
} 

// Make the canvas the appropriate size 
function init_canvas() 
{ 
canvas = document.getElementById("background"); 
    canvas.width = document.width; 
    canvas.height = document.height; 
    canvasW = canvas.width; 
    canvasH = canvas.height; 
} 

乾杯！

Answer 1

あなたのCSSで#containerを使用して、他のすべてにz-indexを1つ与えますが、ページには#containerという要素を入れないでください。

を次のようにあなたのHTMLを変更し

、それが期待どおりに動作します：

<canvas id='background'></canvas> 
<div id="container"> 
    <a href='#'>test</a> 
</div> 

JSFiddle：http://jsfiddle.net/ht6c8/position: absolute持つすべての要素であっても、他の場合、他の置かれていない項目の上に配置されている

Answer 2

要素はDOMの後に配置されます。したがって、アンカー要素にはposition: relativeを設定することができます