円内の相対位置にテキストベースのdivを配置します

Question

直接質問 - 特定のオブジェクトや小さなテキストを特定の領域に配置するにはどうすればよいですか？たとえば、次の画像をhtml/javascriptで置き換えるにはどうすればよいですか？私はポイントがクリックされたことをGoogle EarthのKMLファイルを作成しようとしています - http://i.stack.imgur.com/a3eWL.jpg

ビッグピクチャー - /しかし、このURLを試してみてください。私はイメージを掲載するのに十分な担当者を持っていない

---バルーンの説明ウィンドウがポップアップし、その瞬間に衛星がどこにあるかを示すHTML形式の図を表示できます。 Google EarthとKMLのドキュメントでは、ほとんどのHTMLフォーマットが許可されていますので、現在、これを行う良い方法を探しています。

免責事項：私は何かhtmlやjavascriptの編集を行っているので、一般的な例と洞察力は素晴らしいです。

おかげ

Answer 1

基本的には、以下のセクションでは、私がやったことです。

<div style="display: block; position: relative; width: 300px; height: 300px; border: 1px solid black; background: gray;"> 
    <div style="position:absolute; width: 296px;height: 296px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 148px; border-radius: 148px;"></div> 
    <div style="position:absolute; width: 148px;height: 148px;top: 72px;left: 72px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 75px;border-radius: 75px;"></div> 
    <div style="position:absolute; width: 4px; height: 4px;top:148px; left:148px; background-color: black;"></div> 
    <div style="position: absolute; font-size: 0.8em; color: #222222; top: %dpx; left: %dpx;">%d</div>  
</div> 

最後のdivはどこに配置されているラベルです。 ％dは（私のPythonコードの）整数値です

さらに、ここに実際の例があります。小道具への小道具 http://jsfiddle.net/94Kzt/72/

Answer 2

あなただけのいくつかの絶対的なあなたは彼らのtopとleftのCSSプロパティで移動<div> Sを配置作成することができます。

ここに簡単な例：http://jsfiddle.net/94Kzt/（注：私はすぐにそれを行うにはjQueryのを使用し、標準JS DOM操作呼び出しを使用するように変更するのは簡単です）