css - 如何在 Canvas /div 的 4 个 Angular 中的每一个中 float 可点击的图像元素？

Question

所以我在 div 中有 Canvas 。我有 4 个元素(图像)，我想漂浮在 Canvas (谷歌地图控件样式)的顶部，每个 Angular 落都有一个。我试图找出正确的 html/css 组合，以便它能工作。理想情况下，如果我即时调整 Canvas 的大小，元素将继续 float ，并与每个 Angular 的边缘保持适当的间距。我希望 Canvas 上的任何转换和平移都将与这些元素完全隔离。

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

float 元素可能包含使用背景图像 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;
}