title: HTML elements ontop of SVG (ui overlay)
body: <p>Im trying to add elements (buttons,lists and dropdowns) ontop of an svg (like an overlay). Im unsure how to achieve this, my svg is functioning fine. When I append elements to the svg using the below code I can see the elements are added in the inspector but are not visable in the browser window. Can anyone suggest why its not visable /a better solution?</p>
  
  <p>SVG Plugins:</p>
  
  <ul>
  <li>jquery svg pan-zoom,</li>
  <li>jquery svg + svgdom (keith wood),</li>
  </ul>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="row"&gt;
       &lt;div class="container-svg"&gt;&lt;/div&gt;
   &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.map-nav
  {
      background-color: white;
      width:200px;
      height:1000px;
      float:right;
      position: absolute;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.container-svg').load("img/floorplan.svg", null, function() 
  {
      $('.container-svg svg').append('&lt;div class="map-nav"&gt; &lt;button&gt;building 1&lt;/button&gt;&lt;/div&gt;');
  });
  </code></pre>
  
  <h2> UPDATE</h2>
  
  <p>Iv altered the element append to the container and applied styles to force the nav to the correct position. But I need the contents of the map-nav to be styled using % of container and overflow to be hidden (without forcing the absolute position style). Is there not a way to achieve an overlay like this? </p>
  
  <p>CSS:</p>
  
  <pre><code>.map-nav
  {
      background-color: white;
      width:200px;
      height:1000px;
      float:right;
      position: absolute;
      top:20%;
      right:8%;
      margin:-100px 0 0 -100px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.container-svg').load("img/floorplan.svg", null, function() 
  {
      $('.container-svg').append('&lt;div class="map-nav"&gt; &lt;button&gt;building 1&lt;/button&gt;&lt;/div&gt;');
  });
  </code></pre>
  
  <h2> SOLVED</h2>
  
  <p>Ended up using the below CSS to style a column down the left hand side of my svg container(setting height dynamiclly on pageload/resize).</p>
  
  <pre><code>.nav-svg
  {
    width:20%;
    background-color: rgba(0, 0, 0, 0.5);
    bottom:0;
    position: absolute;
    overflow: hidden;
    padding: 10px;
    padding-left: 70px;
    list-style: none;
  }
  </code></pre>