css - 绝对定位元素，但位于另一个元素的右侧

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 然后成为父元素的左上角。有道理吗？

这是一个 fiddle 来说明这个概念:

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

​​