问题并不那么简单（正如您可能想象的那样），举个例子：
的HTML：
Text text text <div id="special-image"></div> special content More text text text text...
我希望输出看起来如何：
如您所见，#special-image 是“悬停”在内容上而不触碰它。
我知道首先想到的是position:absolute;
但是正如您在示例图像中看到的那样，我希望这些 div位于设置它们position:relative的
区域（在 html 中）。并且 x,y 位置可能因页面而异
（它们不一致）。
页面中的文本应该在页面中保持“锚定”，我不能给它绝对位置。要点是我不希望#special-image div 移动任何文本并只是悬停在那里。
你建议我应该做什么才能实现这种行为？
提前致谢。
编辑：
这更近了一步（感谢@Ross McLellan），
但新创建的 div 正在推送内容：http:
//jsbin.com/isepow/1/
我需要一张图片而不是橙色背景。
如果您知道图像/图像支架的宽度，我想可以通过一些负边距来实现
在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;"> </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;"> </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;"> </div></div> special content More text text text text... </div>
外包装持有绝对风格的位置。这允许特殊图像相对移动而不影响页面的其余部分
编辑
可能修复了使用边距的 IE7 问题。不知道为什么，但事实是他们在 a 上<div>，而是使用 span 并且看起来很开心（据我在测试中看到的，没有移动任何其他文本）
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;"> </span> special content More text text text text...
对我来说，不清楚是什么定义了这两个图像的位置。如果图像应接近特殊内容文本，则将此文本与图像放在单独的 div 中。然后，您可以相对于其父 div 定位图像。