Photoshop Question posted in
The official user guide can be found here.

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

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 .

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search