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>[/CODE]

, when button unclicked I see only svg

[CODE]<svg><canvas></canvas></svg>[/CODE]

Which css property should i used ?

Also in #JavaScript _↴