2

だから私はdivにキャンバスを持っています。キャンバス（Googleマップはスタイルを制御します）の上に浮かせたい4つの要素（画像）が各コーナーに1つずつあります。これが機能するように、適切な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イベントではクリック可能である必要があります。

4

2 に答える 2

6

内の 4 つの要素を絶対に配置します#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;
}
于 2012-06-29T14:09:03.143 に答える
1

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;
}
​
于 2012-06-29T14:10:55.027 に答える