如何将一个 div 移到另一个 div 的前面？答案

【问题标题】：How to move a div into front of the other div?如何将一个 div 移到另一个 div 的前面？
【发布时间】：2017-02-27 15:29:18
【问题描述】：

请看我的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 中的图层概念。我需要使背景层是父画布第一层是 image-canvas ，前层是 text-canvas 。如何做到这一点。？目前发生的事情是我的文本没有显示，它在 image.jpeg 下。

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

【问题讨论】：

你探索过 CSS 中的 z-index 吗？ w3schools.com/cssref/pr_pos_z-index.asp
嗨。在这里我不知道如何使用 z index 。你能解释一下吗？

标签： jquery html css

【解决方案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;
}

【讨论】：

非常感谢朋友。您的代码正在运行。你能告诉我如何将我的文字放在图像的中间吗？ .请解释一下，我不需要溢出：隐藏；在 .imageupload 类中。谢谢。
请检查更新的答案以及演示。并且使用了溢出：隐藏，因为图像尺寸很大。
非常感谢朋友。
如果你有时间，也请检查这个问题stackoverflow.com/questions/40103239/…。否则没问题。

【解决方案2】：

试试这个。

function submit_button()
{
alert('Submit Button Click');
}

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

<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://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" width="100" height="140"></div>

    </div>
 </div>

【讨论】：

感谢您的回答。我会测试它。

【解决方案3】：

使用 CSS z-index，这里是使用 z-index 的示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layer Example</title>
<style>
    body {
        overflow: hidden;
        margin: 50px;
    }

    .layer_one {
        position: absolute;
        height: 20vh;
        width: 20vh;
        background-color: #ffff00;
        z-index: 1;
    }

    .layer_two {
        position: absolute;
        margin: 10px;
        padding: 10px;
        height: 20vh;
        width: 20vh;
        background-color: rgba(138, 43, 226, 0.5);
        z-index: 2;
    }

    .layer_three {
        position: absolute;
        margin: 10px;
        padding: 10px;
        height: 20vh;
        width: 20vh;
        background-color: rgba(0, 128, 128, 0.5);
        z-index: 3;
    }
</style>
</head>
<body>
<div class="layer_one">
background
<div class="layer_two">
    behind layer three
    <div class="layer_three">
        i am layer three
    </div>
</div>
</div>
</body>
</html>

【讨论】：