How to place HTML elements over embedded SVG

Question

I can use z-index to put different HTML elements into each other in any order, except when one of the elements is inline SVG. For example, given 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 related 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 two or adjust the z-index, the built-in SVG displays on top of the text. How can I get SVG for text?

The example above is available at https://jsfiddle.net/o0n10j78/1/ .

If relevant, in my actual application, I generate almost the entire document structure in Javascript using jQuery, including the embedded SVG and HTML block that I want to have in front of me.

Answer 1

The z-index property applies only to located elements. Adding position: relative; The paragraph tag will correctly apply it.

See this page for a complete reference to the property.

On the side of the note. As I first wrote in a comment, setting svg z-index to -1 works because it lowers the priority of an element below the default value that all elements have. This is due to the drawback that svg is actually placed behind the div. Try applying the background color to the div, indicating that the svg z-index is -1.

Answer 2

Add z-index:-1 to svg.

 svg { position: absolute; left: 0; top: 0; z-index: -1; }