How to place HTML elements over inline SVG


Tags: html,css,svg

Problem :

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.



Solution :

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.


    CSS Howto..

    How to change the opacity of elements in css?

    How to create specified distance between the end of a line and the baseline of the second line using css

    Show Feed in two columns in HTML

    How not to use body style css rule in part of html code?

    How to remove dash inside text with CSS?

    How to style a list so that it looks like a table, with various line height?

    How to make a table scrollable with fixed header?

    How do I arrange this in CSS?

    css book on css box model, how block element width can get affected etc

    How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?

    how to textalign in middle with css?

    How to make a gallery

    How to put a table inside an inline-block element where cells have a percentage width

    How can I integrate the code from this pen onto my site?

    How to get value of input using Jquery and put it in css of an element

    In Firebug, how to tell what is overriding a style?

    How to CSS style a radius border

    How can I have my cards stack on top of one another?

    How come one of my columns in bootstrap is not functioning properly?

    CSS how can I add border also to triangle? [duplicate]

    How to vertically aligned to middle with bootstrap?

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    How to set width correctly in CSS - Need to fix bug with Safari on Mac and on iPad

    How to apply CSS to table cell depending on conditions

    Google Share button not showing properly if originaly hidden

    How to apply a complex style to the selection of a Select2 component?

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    How to size images loaded from other users such that dimensions are maintained yet a max width and height are set with css? (HTML/JS/CSS)

    How to generate CSS markup for non-designers

    How can I indent all text in a paragraph except the first line?