如何在canvas/div的4个角中浮动可点击的图像元素？

Question

所以我有一个画布,在一个div.我有4个元素(图像),我想漂浮在画布的顶部(谷歌地图控件样式)每个角落一个.我试图弄清楚正确的html/css组合,以便这将工作.理想情况下,如果我在运行中调整画布大小,元素将继续从每个角的边缘正确地间隔浮动.我希望画布上的任何变换和翻译都将完全与这些元素隔离开来.

<div id="content">
     <canvas id="render"></canvas>
</div>

<script type="text/javascript">
     $(document).ready(function(){
         var canvas = document.getElementById("render");
         canvas.height = 800;
         canvas.width = 900;
     });
</script>

浮动元素可能包含使用背景图像css属性的图像,并且需要可以单击jQuery事件.

Answer 1

绝对将四个元素定位在#content:

http://jsfiddle.net/thirtydot/UTM7x/

#content {
    position: relative;
}
#clickable-1 {
    position: absolute;
    top: 0;
    left: 0;
}
#clickable-2 {
    position: absolute;
    top: 0;
    right: 0;
}
#clickable-3 {
    position: absolute;
    bottom: 0;
    right: 0;
}
#clickable-4 {
    position: absolute;
    bottom: 0;
    left: 0;
}