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
<div>
<p>Text before SVG. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p>
<svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="40" r="20" fill="red" />
</svg>
</div>
<div>
<svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" r="20" fill="red" />
</svg>
<p>SVG before text. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p>
</div>
and the matching CSS
p {
width: 200px;
z-index:10;
}
div {
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
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?
The example above is available at https://jsfiddle.net/o0n10j78/1/ .
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.