Question

请参阅我的HTML

@IBAction func signOut(sender: AnyObject) {
            try! FIRAuth.auth()!.signOut()
            FIRAuth.auth()?.addAuthStateDidChangeListener({ (auth: FIRAuth, user: FIRUser?) in
                if let user = user {
                    // User is signed in.
                    print(user)
                } else {
                    // No user is signed in.
                    print("user signed out")
                }
            })
        }

这里当用户点击imageupload div然后submit_button函数工作。它是用javascript编写的函数。

这里我想要的是我需要让我的文字显示在图像的正面。这就像在Photoshop中的层概念。我需要让背景图层是parent-canvas 第一层是图像画布，前面层是文本画布。如何做到这一点。目前发生的事情是我的文字没有显示，它在image.jpeg下。

另外，我需要让我的文本可编辑。在图像中的任何位置单击然后submit_button函数工作。但是当我们移动到我的文本前面可能在中心部分，在那个文本部分我可以编辑文本，并且保留部分submit_button（）函数需要工作。

Answer 1

试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

<强>样本：

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

Answer 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的前面？

3 个答案: