我创建了一个测试用例，请查看它，因为它说明了我的问题：http://jsfiddle.net/jAD2W/6/ http://jsfiddle.net/jAD2W/6/（简化示例感谢@patrick dw）
为了完整起见，此代码也已添加到本文的底部。
基本上，每当我获得 span 元素或内联 div 元素的偏移量时，top值大于应有的值。
top
当您将鼠标悬停在示例中的图像上时，它应该保持在该绝对位置。不幸的是，它似乎被向下移动了。
是什么导致它向下移动？去掉span元素就解决了问题，说明是span元素的inline属性导致的。不幸的是，我确实需要将整个内容包含在 span 或内联 div 元素中。
来自 jsFiddle 的代码（html、javascript、css）：
<html> <body> <div id='showArea'> <span id="containerElement1"> <img src='http://twitpic.com/show/thumb/5lkmac.jpg' > </span> </div> </body> </html> $('#containerElement1').mouseenter(function(e) { var offset = $(this).offset(); $(this).css({ 'position': 'absolute', 'top': offset.top, 'left': offset.left }); }); img { width:250px; height:150px; } span { width:250px; height:150px; }
我认为问题在于，一旦你给元素“位置：绝对”，你就会改变一堆关于布局的东西。对于初学者来说，<span>元素只是“position: static”和“display: inline”。因为它们是内联的，所以“顶部”值看起来很大，因为它们设置在容器底部的文本基线上。容器<div>换句话说，顶部是文本行的顶部（在您的示例中不存在，但这就是浏览器的想法）。
<span>
<div>
当你将它们翻转到“位置：绝对”时，这些东西的含义就会改变。
如果你从一个 CSS 规则开始，该规则给出了跨度“display: inline-block”，那么行为就会改变（尽管它仍然有点奇怪）。 （edit— 啊，是“text-align: center”在进行水平移动。一旦第一个元素被拉出队列，另一个元素就必须重新居中。）
请注意，当您添加跨度时，给它们指定高度没有任何效果；它们是内联元素，而不是块。
edit— 我想过如何做到这一点，但这有点棘手，因为不清楚你想要什么效果。问题在于内联内容的布局规则会影响图像并导致奇怪的行为。例如，“文本对齐：居中”会在您“固定”图像时立即移动内容。因此，使用“内联块”，当您移动到一个元素上时，它会冻结在适当的位置，但另一个图像将被调整以遵守“文本对齐”规则，从而与固定的图像重叠。
