2

中央に配置したいdivがあるので、使用します

margin-left: auto;
margin-right: auto;
position: relative;

これは私が認める最も簡単な中央揃えの方法ですが、event.pageX と event.pageY を使用したい場合は、座標と左余白が必要になります。これは間違っています。

これがフィドルです。緑色の四角形のどこかをクリックして、結果を確認します。

http://jsfiddle.net/FGkUq/

左マージンなしで座標に正方形を表示するように修正する方法はありますか?

4

1 に答える 1

1

更新された fiddleを見てください。

キャンバスの配置を削除する簡単な解決策：

#canvasDiv { 
    width: 30%;
    height: 400px;  
    cursor:crosshair;  
    background-color: #458B00; 
    /* position: relative; */  
    ...
}

問題はテンプレートの配置にあります。absoluteまだ「相対的」だからです。

絶対位置の定義:絶対位置要素は、静的以外の位置を持つ最初の親要素に対して相対的に配置されます。

したがって、デフォルトの配置のままにしない限り#template、 の位置は の位置を考慮します。#canvasDiv#canvasDivstatic

w3schoolsでのポジショニングの詳細

相対的に配置された要素内に要素を絶対的に配置する: here

問題のタブ 3 と 4の良い例です。

の相対位置に固執したい場合canvasDivは、スクリプトを更新する必要があるため、 の位置が考慮されますcanvasDiv。

var x = event.pageX;  
var y = event.pageY;   
var canvasPos = $(this).offset(); // in the context of your script this refers to #canvasDiv
var styles = {
   "left" : x - canvasPos.left, // remove its left offset
   "top" : y - canvasPos.top // remove its top offset
};

フィドルをチェックしてください

于 2013-05-10T09:34:49.160 に答える