How to move a div into front of the other div?

Question

Please see my 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>

Here when user click on imageupload div then submit_button function works .It is function written in javascript .

Here what i want is i need to make my text showing infront of the image . It's like layer concept in photoshop . I need to make the background layer is parent-canvas first layer is image-canvas , and the front layer is text-canvas .How to do this .? Currently what happen is my text is not showing and it is under image.jpeg.

Also i need to make my-text editable. Anywhere in the image click then submit_button function work . But when we move to my text to front may be in the center portion , on that text portion i can edit the text , and the remain portion submit_button() function need to work .

Did you explore z-index in CSS? http://www.w3schools.com/cssref/pr_pos_z-index.asp — Turo, Oct 18 '16 at 11:23
hi . here i don't know how to use z index . Could you please explain . — , Oct 18 '16 at 11:28

score 1 · Answer 1 · answered Oct 18 '16 at 11:28

Try This.

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>

Thank you for the answer . I will test it . – Oct 18 '16 at 11:29 — , Oct 18 '16 at 11:29

Mark Wilson · Accepted Answer · 2016-10-18T11:54:23.290

1

DEMO:

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

edited Oct 18 '16 at 11:54

answered Oct 18 '16 at 11:31

Mark Wilson

1,324
2
10
19

Thank you very much friend . Your code is working . Could you please tell how can i position the my text in to the middle of the image ? . Please explain this and i don't need overflow: hidden; in .imageupload class. Thank you . – Oct 18 '16 at 11:39
Please check the updated answer and also the demo. And the overflow: hidden is used because the image size is big. – Mark Wilson Oct 18 '16 at 11:54
Thank you very much friend . – Oct 18 '16 at 11:57
If you have time , then please check this question too http://stackoverflow.com/questions/40103239/add-resize-position-color-change-text-inside-a-div-using-jquery . Otherwise no problem . – Oct 18 '16 at 12:14

score 0 · Answer 3 · answered Oct 18 '16 at 11:39

Use CSS z-index, here is an example of using 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>

How to move a div into front of the other div?

3 Answers3