Javascript 2个分区相互覆盖

我所拥有的是：

<style>
#main{position:relative; width:600px; height: 600px;}
#cover{position:absolute}
#image{position:absolute}
</style>

<div id="main">
   <div id="cover"><img src="template.png" /></div>
   <div id="image"><img src="user.jpg" /></div>
</div>

#主{位置：相对；宽度：600px；高度：600px；}
#封面{位置：绝对}
#图像{位置：绝对}

我需要的是能够移动用户图像，但它将被覆盖的封面div，将掩盖我的另一个。有办法吗

此外，我需要知道是否有可能只包含png文件的div#cover，但是图像的大小没有id#main那么大，所以cover div的其余部分将是背景色白色，而不会在图像区域中显示白色

更新： 我想有一个层（div#cover）来覆盖另一个层（div#image）。在第一个我将有一个圆圈，它的内部是透明的，外部是白色的，所以我将能够看到底层img在覆盖层内 我会将jquery拖到第二层，但它不会工作，因为顶层会阻止它被鼠标拖动

---

我的问题是-当底层上有一个覆盖层时，是否可以拖动底层？

如果要用另一个div覆盖一个div，请使用z-index属性：

#cover{position:absolute;z-index:101;}
#image{position:absolute;z-index:100;}

我不能回答你的第二个问题，因为我不明白。你能更准确地解释一下吗

---

编辑：编辑后，我理解您的意思：您想移动某种裁剪框下的图像。我认为这比使用2个div和CSS更复杂…

回答一个不理解的问题非常困难

如何使图像/容器可拖动：

在我看来，使用jQuery/jQuery UI是最简单的方法

您的封面图像将位于其他图像之上，因为您正在将其写入主图像之前的页面。[从上到下渲染]

---

我知道这是否能回答您的问题。

很难理解，请创建一个JSFIDLE演示。请尝试更明确、更清晰地表达您的想法。您想用这个标记实现什么？如中所示，这将用于什么？我想我知道你想做什么，但我不认为这会起作用…我想制作并上传一张照片，用户将其放入封面，以便将他的照片（例如脸）放入提到的头像卡希夫的封面中，您可以使用z-index来正确设置项目的层级别。让我非常接近解决方案如果您想拖动div，请使用jQuery（如@Marc Uberstein所述）