title: How to put img in front of svg tag
body: <p>I'm using snap.svg
  I have index.html</p>
  
  <pre><code>&lt;!Doctype&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;MAP_TEST&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script type = "text/javascript" src = "JS/jquery.js"&gt;&lt;/script&gt;
      &lt;script type = "text/javascript" src = "JS/init.js"&gt;&lt;/script&gt;
      &lt;script type = "text/javascript" src = "JS/snap.svg.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="comm_cont"&gt;
          &lt;div id = "svgborder"&gt;
              &lt;svg id = 'svgmain'&gt;&lt;/svg&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And init.js</p>
  
  <pre><code>$( document ).ready(function() {
      var s = Snap("#svgmain");
      var g = s.group();
      Snap.load("SVGFILES/3k1e-test.svg",function(lf)
      {
          g.append(lf);
          //trying to load picture... Scale button in future
          $('&lt;img /&gt;', {
                  src: 'PNG/plus.png',
                  width: '30px',
                  height: '30px',
                  id: 'buttoninrk'
          }).appendTo($('.comm_cont'));
          //this button must be on picture
          //but in front of the picture svg element
          //And i can't click the button
      });
  });
  </code></pre>
  
  <p>I played with z-indexes of <b>#svgborder</b> and <b>#buttoninkr</b> but it didn't help me.
  How to put button in front of svg element?</p>
  
  <pre><code>#buttoninkr, #svgborder
  {
      position: absolute;
  }
  #svgborder
  {
      border:5px solid black;
      z-index: 0;
      margin-left:auto;
      border-radius: 5px;
      display: inline-block;
  }
  #buttoninkr
  {
      z-index: 1;
  }
  </code></pre>
  
  <p>Added css code with z-indexes.
  There is a reason why i'm not using svg buttons instead jquery image button.</p>
  
  <p><b>Ok, as you can see #svgmain in front of plus.png </b>
   <a href="http://jsfiddle.net/3wcq9aad/1/" rel="nofollow">http://jsfiddle.net/3wcq9aad/1/</a></p>
  
  <p>Any ideas?</p>
  
  <p>Solved</p>
  
  <pre><code> #svgborders
    {
        position: absolute;
        background-color: #535364;
        border:5px solid black;
        z-index: 0;
        margin-left:auto;
        border-radius: 5px;
        display: inline-block;
    }
   #buttoninrk, #buttondekr, #home_btn
   {
       position: inherit;
       top:0;
       margin:10px;
       z-index: 1;
   }
   #buttoninrk
   {
       right:0px;
   }
   #buttondekr
   {
       right:60px
   }
  </code></pre>