title: How to place HTML elements over inline SVG
body: <p>I'm able to use z-index to put various HTML elements over each other in whatever order I like, except when one of the elements in an inline SVG.  For example, given the HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;Text before SVG. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?&lt;/p&gt;
      &lt;svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;circle cx="75" cy="40" r="20" fill="red" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;circle cx="75" cy="75" r="20" fill="red" /&gt;
      &lt;/svg&gt;
      &lt;p&gt;SVG before text. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the matching CSS</p>
  
  <pre><code>p {
      width: 200px;
      z-index:10;
  }
  div {
      position: relative;
  }
  svg {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
  }
  </code></pre>
  
  <p>no matter how I order the two or adjust the z-index, the inline SVG renders on top of the text.  How can I get the SVG behind the text?</p>
  
  <p>The example above is available at <a href="https://jsfiddle.net/o0n10j78/1/" rel="noreferrer">https://jsfiddle.net/o0n10j78/1/</a> .</p>
  
  <p>If it's relevant, in my actual application I'm generating nearly all of the document structure in Javascript with the assistance of jQuery, including the inline SVG and the HTML block I wish to have in front of it. </p>