How to got two images in the same place

Hi guys, how can I get two images in the same place on different z-index. Only one of image can be visible becouse second image is under this first. I want to work on two images, and when user clicked button "up" z-index of first image will change value to go on front and when user unclicked this button image from front will go under this second image. But first of all I must to got images of the same size in one place. Problem for me is that one image is <canvas> and second is <svg>. So when button clicked i see only canvas

Code:

---

<canvas><svg></svg></canvas>

---

, when button unclicked I see only svg

Code:

---

<svg><canvas></canvas></svg>

---

Which css property should i used ?

I'm not certain this can be done with svg and canvas. But it shouldn't be either of the two things you have. It should be:

Code:

---

<svg></svg><canvas></canvas>

---

or:

Code:

---

<canvas></canvas><svg></svg>

---

Because anything non-svg contained in svg ends svg and visa versa with the canvas tag.

Then you can stack them by using each of their own methods for positioning. Using z-index for canvas may work. The svg may actually have to be rendered invisible in some manner to get it to appear to fall behind the canvas element. Are these the same size? That is, if one is on top of the other would it cover the other completely?

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.