絕對位置元素，但在另一個元素的右側

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