要素を絶対的に配置するが、別の要素の右側に配置する

Question

HTMLとCSSを使用してフォームフィールドの右側に吹き出しを追加しようとしています。私は絶対に配置されているので、他のレイアウトに影響を与えないようにしたいのですが、別の要素の右にある程度距離を置いておきたいと思います。

これは私が持っているものは基本的である：

<ul> 
    <dt><label>...</label></dt> 
    <dd> 
     <input ...> 
     <span class='callout'>Helpful tip about this field</span> 
    </dd> 
</ul> 

そして：

.callout { 
    position: absolute; 
} 

だから私は、したがってposition:absolute（レイアウトフローのうち、.calloutをしたいが、私はそれだけで右側に配置したいです（フィールドの幅はあらかじめわかっていませんが）入力フィールドの値を入力してください。

アイデア？

Answer 1

あなたは要素に対して絶対的に配置したいと思うでしょう。したがって、コンテナーをposition：relativeに設定し、コールアウトをposition：absoluteに設定します。上/左が親要素の左上になります。理にかなっている？ここで

は、概念を説明するためのフィドルです：

http://jsfiddle.net/tNCDK/

HTML：

<div id="parent"> 
    <div id="child"></div> 
</div> 

はCSS：

#parent { 
    position: relative; 
    border: solid 1px #000; 
    width: 200px; 
    height: 200px; 
} 

#child { 
    position: absolute; 
    top: 10px; 
    right: -50px; 
    border: solid 1px #000; 
    width: 50px; 
    height: 50px; 
}