1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to got two images in the same place

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

  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 ?
    SEMrush
     
    comosejama, Sep 28, 2016 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,408
    Likes Received:
    1,368
    Best Answers:
    24
    Trophy Points:
    400
    #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,331
    Likes Received:
    1,823
    Best Answers:
    244
    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