Question

我拥有的是：

<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>

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

另外我需要知道是否可以让div＃cover只包含png文件，但是图片的大小没有id＃main那么大，所以封面div的其余部分将是背景颜色为白色 - 图像区域没有白色？

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

我的问题是 - 如果底层有遮盖层，是否可以让底层被拉开？

Answer 1

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

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

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

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

Answer 2

很难回答一个人无法理解的问题。

如何使图像/容器可拖动：http://jsfiddle.net/cNtfM/

使用jQuery / jQuery-UI是我眼中最简单的方法。

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

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

2 div相互覆盖

2 个答案: