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

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 并将您的标注设置为 position: absolute。Top/left 然后成为父元素的左上角。有道理？

这是一个说明这个概念的小提琴：

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

??