css - 如何在画布/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;
}

Answer 2

position: absolute在您的叠加元素上使用。

这是 JSFiddle 上的一个示例。它很粗糙，但它表现得很好。

HTML：

<div id="canvasContainer">
    <canvas></canvas>
    <div class="overlay top left">
        Top left stuff
    </div>
</div>​

CSS：

#canvasContainer {
    position: relative;
}
#canvasContainer canvas {
    width: 400px;
    height: 300px;
    background: blue;
}
#canvasContainer div.overlay {
    position: absolute;
    padding: 10px;
    background: #eee;
    top: 0px;
    left: 0px;
}
​