0

この問題は (ご想像のとおり) それほど単純ではありません。次の例を見てください。

HTML:

Text text text <div id="special-image"></div> special content More text text text text...


出力を どのように見せたいですか：

ここに画像の説明を入力

ご覧のとおり、#special-image はコンテンツに触れることなく「ホバリング」しています。
最初に頭に浮かぶのは知ってposition:absolute;
いますが、例の画像でわかるように、これらの div を (html で)設定されposition:relativeている領域に配置したいと考えています。
また、x、y 位置はページごとに異なる場合があり
ます (一貫性がありません)。

ページ内のテキストは、ページ内で「固定」されたままにする必要があります。絶対的な位置を指定することはできません。重要な点は、#special-image div でテキストを移動したり、そこにカーソルを合わせたりしたくないということです。

この種の動作を実現するために何をすべきかを提案しますか?

前もって感謝します。


編集:
これは一歩近づいています (@Ross McLellan のおかげで)、
しかし、新しく作成された div はコンテンツをプッシュしています:
http://jsbin.com/isepow/1/
そして、オレンジ色の背景の代わりに画像が必要です。

4

3 に答える 3

2

画像/画像ホルダーの幅がわかっている場合は、マイナスのマージンで達成できると思います

IE7では動かない...

<div>Text text text <div id="special-image" style="display: inline-block; position: relative; top: -15px; left: -15px; width: 40px; margin-right: -40px; background-color: #ff6600;">&nbsp;</div> special content More text text text text... </div>

Chrome で動作しない...

<div>Text text text <div id="special-image" style="position: absolute; margin-top: -15px; margin-left: -5px; width: 40px; background-color: #ff6600;">&nbsp;</div> special content More text text text text... </div>

追加のラッパーが許可されている場合の代替ソリューション:

<div>Text text text <div style="position: absolute; display: inline;"><div id="special-image" style="display: inline-block; position: relative; top: -15px; left: -15px; width: 40px; background-color: #ff6600;">&nbsp;</div></div> special content More text text text text... </div>

外側のラッパーは、位置絶対スタイルを保持します。これにより、ページの残りの部分に影響を与えることなく、特別な画像を相対的に移動できます

編集 マージンを使用してIE7の問題を修正した可能性があります。理由<div>はわかりませんが、代わりにスパンを使用して .

Text text text<span id="special-image" style="position: relative; top: -15px; left: -15px; display: inline-block; width: 40px; margin-right: -40px; background-color: #ff6600;">&nbsp;</span> special content More text text text text...
于 2012-07-26T17:06:24.887 に答える
0

私には、2 つの画像の位置を定義するものは明確ではありません。画像が特別なコンテンツ テキストに近い場合は、このテキストを画像と一緒に別の div に入れます。次に、親 div を基準にして画像を配置できます。

于 2012-07-26T17:01:56.737 に答える
0

このような ？

div#special-image{position:absolute;top:-5px; display:inline-block;}​

これを概念の証明として参照してください;-)

于 2012-07-26T17:02:51.130 に答える