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 insert CSS code into a page if I can't insert it into head tag? Only inline mode?

    How are styles within div's made 'safer' (i.e. so they do not override parent styles)

    How to create a horse-shoe-like gauge using CSS

    How to have two items be placed next to each other in HTML?

    How to adjust nav menu based nav item name character length?

    How Do I Make Li Clickable for Radio Button Inside

    How to align text vertically

    How to deploy a jekyll site locally with css, js and background images included?

    How to add lines to
  • elemtents
  • How to create table by using div

    How to remove border-bottom of last div in a group - CSS

    Css code how to create multiple div classes

    how to CSS center a div, which is the child of a form element?

    How do I make the HTML Slider with CSS stay in the box?

    How do I create a margins on Google maps? [closed]

    Images not showing up in correct spot [closed]

    How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

    “Dynamic” CSS id names? How to add them to the CSS file?

    How to apply CSS only to numbers in paragraph? (without )

    How to fix transparent div child in parent?

    How to simulate \hfill with HTML and CSS?

    how to make css tooltip not push elements outline in FF

    How i can force my div to display in block?

    How can I improve this markup and CSS to keep things simple and easy to work with?

    How to prevent javascript and css messing up?

    How to override xhtml theme css?

    How to keep images fixed but also responsive so they don't overlap

    How do I center my search form within a div?

    How to achieve a CSS footer “curtain” effect?

    How to make box container expand when text-field does?