位置元素绝对，但在另一个元素的右边 [英] Position element absolutely, but to the right of another element

问题描述

我想使用HTML和CSS在一些表单域的右侧添加一个标注框。我不想让标注执行任何其他布局，所以我已经绝对定位，但我想以某种方式将它定位在另一个元素的右边一定距离。

这基本上是我有的：

 < ul> 
< dt>< label> ...< / label>< / dt> 
< dd> 
< input ...> 
< span class ='callout'>此字段有用的提示< / span> 
< / dd> 
< / ul> 
  

和：

  .callout {
 position：absolute; 
} 
  

所以我想要 .callout 出布局流程（因此 position：absolute ，但我希望它定位在它所关联的输入字段的右侧（不知道

解决方案

任何想法？ >你将要相对于你的元素定位它，所以，设置你的容器为position：relative和callout to position：absolute。Top / left然后成为父元素的左上角。 / p>

这是一个小提示来说明这个概念：

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

I'm trying to add a callout bubble to the right of some form fields using HTML and CSS. I don't want the callout effecting any other layout so I've got it positioned absolutely, but I'd like to somehow position it a certain distance to the right of another element.

This is basically what I have:

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

And:

.callout {
    position: absolute;
}

So I want the .callout out of the layout flow (hence position:absolute, but I want it positioned just to the right of the input field it's associated with (without knowing the width of the field in advance, of course).

Any ideas?

解决方案

You're going to want to position it absolutely relative to your element. So, set your container to position: relative and your callout to position: absolute. Top/left then becomes the top left of the parent element. Make sense?

Here's a fiddle to illustrate the concept:

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

​​

这篇关于位置元素绝对，但在另一个元素的右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！