фон холста делает якоря неприкосновенными

Question

Я нашел смешанные доказательства того, возможно ли создать динамический фон с помощью элемента HTML5 canvas.Вот парень, который, похоже, успешно это сделал:

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

Я успешно разместил свой элемент canvas в качестве фона, но он сделал мои ссылки не щелкающими.Вот ситуация:

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;
}

Cheers!

Answer 1

Вы используете #container в своем CSS, чтобы дать всем остальным z-index из 1, но вы никогда не помещаете элемент #container на страницу.

Измените ваш HTML на следующий, и он будет работать как положено:

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

JSFiddle: http://jsfiddle.net/ht6c8/

Answer 2

каждый элемент с position: absolute размещается над другим не позиционированным элементом, даже если другие элементы помещаются в DOM после. Таким образом, вы можете просто установить position: relative для своего элемента привязки