我想做的是这样的：
<div> (parent, sized to img)
<div> (movable within parent, z-level 1+)
<img /> (z-level 0)
</div>
</div>
有这些限制：
html img需要能够从Java脚本更改其src（和大小）。
最高的z级div应该能够从Javascript更改其大小，并且跟随鼠标（通过javascript）。我想使用相对定位，因此坐标与img尺寸匹配。也许绝对会使用父级尺寸？ （与img相同）
外部div就在那里，因此我可以从中读取鼠标单击的位置。它应该能够更改其大小以跟随img src中的更改。
我有涉及相同材质的高分辨图像和低分辨图像的用途。我想用一个可移动的缩放框（带边框的透明div）显示低分辨率图像，然后当用户单击它时，调整img对象和外部div的大小并加载高分辨率图像，然后滚动窗口以将相应的窗口居中高分辨率图像上的（缩放）点。没有实际的缩放，而是通过滚动高分辨率来实现的。
除缩放框外，我一切正常，它可以加载高分辨率并在单击时滚动确定。为了能够将可移动框上的z索引设置为高于img，但仍使可移动框层使用与固定div相同的坐标，因此img就是问题。盒子需要漂浮在img上。我之所以不使用图像作为背景，部分原因是我需要在y中拉伸它。
网站所有者认为，如果将图片压缩到变形的长宽比，可能有助于防止图像被盗。我计算高度并强制img使用该高度，这会使它们看起来更好。不同的图像具有不同的宽高比，这就是为什么我要Javascript控制缩放框的大小的原因。
最佳答案
使用CSS3中新增的:before和:after伪选择器，您可以在同一对象上轻松拥有2个额外的图层。
这对于在同一对象上应用图层非常有好处，因为这意味着您不必为必须浮动和调整原始元素的边界以及其他麻烦而烦恼。
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
关于css - 在html img上堆叠2个div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7139877/