jquery - 如何将一个div移到另一个div的前面？

Question

请看我的html

<div class="parent-canvas">
    <div class="text-canvas" contenteditable="true">
        my text
    </div>
<div class="image">
    <div class="image-canvas">
        <div class="imageupload" onclick="submit_button()"><img src="Image.jpeg"></div>

    </div>
 </div>
</div>

在这里，当用户点击 imageupload div 时，submit_button 函数起作用。它是用 javascript 编写的函数。

这里我想要的是我需要让我的文字显示在图像的前面。这就像 photoshop 中的图层概念。我需要让背景层是parent-canvas 第一层是image-canvas，最前面一层是text-canvas，这个怎么弄啊？目前发生的是我的文字没有显示，它在 image.jpeg 下。

我还需要使我的文本可编辑。在图像中的任何地方单击然后 submit_button 功能工作。但是当我们移到前面的文本时，它可能位于中间部分，在该文本部分我可以编辑文本， 剩下的部分 submit_button() 函数需要工作。

Answer 1

演示:

http://plnkr.co/edit/YmlDaDluwALneBjyQjQE?p=preview

html:

   <div class="parent-canvas">
    <div class="text-canvas" contenteditable="true">
        my text
    </div>
    <div class="image-canvas">
        <div class="imageupload" onclick="submit_button()"><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"></div>

    </div>
 </div>

CSS:

.parent-canvas {
  position: relative;
  width: 500px;
  height: 300px;
}

.text-canvas,.imageupload {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.text-canvas {
  text-align: center;
  color: #fff;
  z-index:1;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
}

.imageupload {
  display: block;
  overflow: hidden;
}