How to got two images in the same place

Discussion in 'CSS' started by comosejama, Sep 28, 2016.

0
  1. #1
    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
    
<canvas><svg></svg></canvas>
    Code (markup):
    , when button unclicked I see only svg
    
<svg><canvas></canvas></svg>
    Code (markup):
    Which css property should i used ?
     
    comosejama, Sep 28, 2016 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,262
    Likes Received:
    1,693
    Best Answers:
    31
    Trophy Points:
    475
    #2
    I know nothing about canvas or svg, but you can try absolute positioning (not always recommended, but it's probably a sure fix for you):

    
position: absolute;
    Code (markup):
     
    qwikad.com, Sep 28, 2016 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    In <svg>'s case <canvas> is not a valid child tag, so that would be broken/nonfunctional/not do a damned thing. In <canvas>'s case, the contents of <canvas> is a fallback for browsers that do not support <canvas>, so the SVG image would only ever show if canvas were broken.

    ... which is why you'd make those images siblings to each-other, and as @qwikad.com suggested absolute position one over the other. I'd leave at least one of them static or relative so that you have an element in flow, only putting position:absolute on one of them.

    MIND you, both being "render type" elements there's no guarantee they'll even obey z-index... part of why I would likely NEVER even CONSIDER trying to have the two interact in the first place... though admittedly the bloated slow battery wasting train wreck that is SVG really isn't that high up on my "use it on websites" list. Usually that's why I'll suck down the extra bandwidth and use a double-res .png instead. Just like crApple does for their UI icons when they realized SVG wasn't ready for prime-time in a realitime usage scenario.

    I'm really not sure browsers can even handle layering them one atop the other properly in a consistent manner.

    Also beware that changing the positioning or sorting of a <canvas> can erase the contents forcing you to have to redraw it all over again... which is why canvas as a non-realtime updated element is a bit of a /fail/ at web development.
     
    deathshadow, Sep 29, 2016 IP