How to place HTML elements over inline SVG

Question

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.

Answer 1

The z-index property is only being applied on positioned elements. Adding position: relative; to the paragraph tag will correctly apply it.

Look at this page for a full reference of the property.

On a side note: As I first wrote in a comment, setting the svg z-index to -1 works as it lowers the priority of the element below the default that all elements have. This comes with the downside that the svg actually being placed behind the div as well. Try apply a background color to the div while having the svg z-index set to -1.