title: svg element layer / overlap / overlay / superimposition
body: <p>With a view to making them hot pluggable / draggable / scaleable, I've been playing around with Mike Bostock's d3 <a href="http://mbostock.github.com/d3/tutorial/circle.html" rel="nofollow">three little circles</a> examples.</p>
  
  <p>While doing this, I stumbled across an issue (using Firefox 16.0.2, btw - normally fine for svg) which, though in itself not serious, somehow bugs me: namely that though always present in the resulting HTML, any attempt at <strong>overlaying</strong> the rectangular viewing area with the <strong>button</strong> element fails.</p>
  
  <p>I've tried following each piece of advice at the foot of <a href="https://github.com/mbostock/d3/issues/252" rel="nofollow">this</a> exchange, but these have had no impact.</p>
  
  <p>Here my base code, whereby the button is shown <strong>outside</strong> the circle's containing svg view area. The groupings are part of preparations for experiments with drag n drop / scalability:</p>
  
  <pre><code>var root = d3.selectAll("g#tool-2");
  
  var g0 = root
  .append("g")
  .attr("class", "g0")
  .attr("id", function (d, i) { return d.tool});
  
  var g01 = g0
  .append("g")
  .attr("class", "g01")
  .attr("id", function (d, i) { return d.tool});
  
  var g02 = g0
  .insert("g")
  .attr("class", "g02")
  .attr("id", function (d, i) { return d.tool});
  
  var svg = g01
  .insert("svg")
  .attr("width", width)
  .attr("height", height);
  
  var button = g02
  .append("div")
  .attr("class", "button")
  .attr("id", function (d, i) { return d.tool}) 
  .append("button")
  .text(function(d) { return "Run" });
  
  svg.selectAll(".little")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "little")
  .attr("cx", x)
  .attr("cy", y)
  .attr("r", 12);
  
  console.log("Got past circle creation");
  
  button
  .on("click", function() {
  
      svg.selectAll(".select").remove();
  
      svg.selectAll(".select")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "select")
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", 60)
      .style("fill", "none")
      .style("stroke", "red")
      .style("stroke-opacity", 1e-6)
      .style("stroke-width", 3)
      .transition()
      .duration(750)
      .attr("r", 12)
      .style("stroke-opacity", 1);
  });
  </code></pre>
  
  <p>Appended to <strong>any</strong> of root, g0, g01 or g02, the button is shown outside the rectangular container. All well and good. Here, for example, the html resulting from the code shown above:</p>
  
  <pre><code>&lt;g id="tool-2" class="g0"&gt;
      &lt;g id="tool-2" class="g01"&gt;
          &lt;svg height="180" width="360"&gt;
              &lt;circle r="12" cy="45" cx="180" class="little"&gt;&lt;/circle&gt;
              &lt;circle r="12" cy="90" cx="60" class="little"&gt;&lt;/circle&gt;
              &lt;circle r="12" cy="135" cx="300" class="little"&gt;&lt;/circle&gt;
              &lt;circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="45" cx="180" class="select"&gt;&lt;/circle&gt;
              &lt;circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="90" cx="60" class="select"&gt;&lt;/circle&gt;
              &lt;circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="135" cx="300" class="select"&gt;&lt;/circle&gt;
          &lt;/svg&gt;
      &lt;/g&gt;
      &lt;g id="tool-2" class="g02"&gt;
          &lt;div id="tool-2" class="button"&gt;
              &lt;button&gt;Run&lt;/button&gt;
          &lt;/div&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>Regardless of append element used, however, whether using</p>
  
  <ul>
  <li>z-index</li>
  <li>x &amp; y coordinates</li>
  <li>dx &amp; dy coordinates</li>
  <li>with or without id</li>
  <li>with or without class</li>
  <li>with or without positioning</li>
  </ul>
  
  <p>..the button, though <strong>present in the resulting html</strong>, either continues to be shown outside the container, or is simply not displayed.</p>
  
  <p>There seems to be an issue with svg overlaying with which I'm really not familiar. Any hints?</p>
  
  <p>Thanks
  Thug</p>