我需要在我的博客图像上放置缩放图标。
易于简单的图像（我正在使用 jQuery 添加 <span> 元素）：
<a href="..." rel="lightbox">
<span style="position:absolute; background-image: url(zoom.png);"/>
<img src="img.jpg" />
</a>
但有些图像具有“float:left”或“float:right”对齐方式。如何将 <span> 放置在浮动图像上？
示例：http: //jsfiddle.net/4Nvbe/1/
这是一个可能的解决方案，但这在很大程度上取决于您的其他样式。
我已经放置了 position: relative 并将浮动移动到锚点（我承认，你的其余代码可能会阻止你这样做。请参阅小提琴以查看它的实际效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {width:30px;height:30px;border:1px solid red;display:block;margin:3px;}
span {width:20px;height:20px;border:1px solid blue;display:block;margin:3px;}
a { border:2px dotted green;display:inline-block;position:relative; }
</style>
</head>
<body>
<div>
<a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img src="img.jpg" /> </a>
<a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img src="img.jpg" /> </a><br style="clear:both" />
<a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img style="float:right;" src="img.jpg" /> </a>
</div>
</body>
</html>
问题似乎是您的 HTML 结构，您使用跨度是否有特殊原因？一个 div 似乎做得很好。
这里有一个工作演示http://jsfiddle.net/4Nvbe/但是如果你尝试改变它来添加一个 div ，那么标记看起来像：
<a href="..." rel="lightbox"><div style="position:absolute; background-image: url(zoom.png);"/><img src="img.jpg" /></a>
它可能会解决您的问题。
在我的示例中，我也刚刚使用了一个类，这样样式/视觉控制就留在了样式表中，而不是渗入到您的 JS 中。
我遇到了类似的问题，并使用了 a<div>而不是<span>Pete Uh 建议的那样，并且它有效。