Jquery 如何将元素放置在浮动图像上？
我需要在我的博客图片上放置缩放图标 对于简单图像很容易（我使用jQuery添加元素）：Jquery 如何将元素放置在浮动图像上？,jquery,css,css-float,Jquery,Css,Css Float,我需要在我的博客图片上放置缩放图标 对于简单图像很容易（我使用jQuery添加元素）： 但有些图像有“浮动：左”或“浮动：右”对齐。如何放置浮动图像 示例：问题似乎在于您的HTML结构，您使用span是否有特殊原因？一个div似乎做得很好 这里有一个正在运行的演示，但是如果您尝试将其更改为添加一个div，则标记如下所示： <a href="..." rel="lightbox"><div style="position:absolute; background-image:
示例：问题似乎在于您的HTML结构，您使用span是否有特殊原因？一个div似乎做得很好 这里有一个正在运行的演示，但是如果您尝试将其更改为添加一个div，则标记如下所示：
<a href="..." rel="lightbox"><div style="position:absolute; background-image: url(zoom.png);"/><img src="img.jpg" /></a>
在我的示例中，我还使用了一个类，这样样式/视觉控件就留在样式表中，而不是渗入到JS中。这里有一个可能的解决方案，但它将严重依赖于其他样式 我已经放置了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>
img{宽度：30px；高度：30px；边框：1px实心红色；显示：块；边距：3px；}
span{宽度：20px；高度：20px；边框：1px纯蓝色；显示：块；边距：3px；}
{边框：2px点绿色；显示：内联块；位置：相对；}