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和callout to 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; 
}

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

1 个答案: