如何将一个 div 移到另一个 div 的前面？
Posted
技术标签:
【中文标题】如何将一个 div 移到另一个 div 的前面？【英文标题】：How to move a div into front of the other 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/cs-s-ref/pr_pos_z-index.asp 嗨。在这里我不知道如何使用 z index 。你能解释一下吗？ 【参考方案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 类中。谢谢。 请检查更新的答案以及演示。并且使用了溢出：隐藏，因为图像尺寸很大。 非常感谢朋友。 如果你有时间，也请检查这个问题***.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" ></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>
【讨论】：
以上是关于如何将一个 div 移到另一个 div 的前面？的主要内容，如果未能解决你的问题，请参考以下文章