绝对位置元素，但在另一个元素的右侧

Question

我正在尝试使用HTML和CSS在某些表单字段的右侧添加标注气泡。我不希望标注影响任何其他布局，所以我已将它定位到绝对位置，但我想以某种方式将它定位到另一个元素的右侧一定距离。

这基本上就是我：

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

和：

.callout { 
    position: absolute; 
} 

所以我想.callout出版图流程（因此position:absolute的，但我想它只是位于右侧的输入字段（当然不需要事先知道字段的宽度）。

任何想法？

Answer 1

你会想要相对于你的元素绝对定位它。因此，将您的容器设置为position：relative和您的标注位置：绝对。顶部/左边然后成为父元素的左上角。合理？

这里有一个小提琴来说明这一概念：

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; 
}