2

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、関連付けられている入力フィールドのすぐ右側に配置する必要があります（もちろん、フィールドの幅を事前に知らなくても）。

何か案は？

4

1 に答える 1

5

あなたはそれをあなたの要素に対して絶対的に相対的な位置に置きたいと思うでしょう。したがって、コンテナをposition：relativeに設定し、calloutを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; 
}

</ p>

于 2012-05-08T19:56:42.963 に答える