如何将HTML元素放在内联SVG上

Question

我可以使用z-index将各种HTML元素以我喜欢的顺序放在彼此之外,除非是内联SVG中的一个元素.例如,给定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>

和匹配的CSS

p {
    width: 200px;
    z-index:10;
}
div {
    position: relative;
}
svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

无论我如何订购这两个或调整z-index,内联SVG都会在文本的顶部呈现.如何获得文本背后的SVG？

以上示例位于https://jsfiddle.net/o0n10j78/1/.

如果它是相关的,在我的实际应用程序中,我在jQuery的帮助下生成几乎所有的Javascript文档结构,包括内联SVG和我希望在它前面的HTML块.

Answer 1

z-index属性仅应用于定位元素.添加position: relative;到段落标记将正确应用它.

请查看此页面以获取该物业的完整参考.

在旁注:正如我在评论中首次写的那样,将svg z-index设置为-1可以降低元素的优先级,使其低于所有元素所具有的默认值.这带来了svg实际上被放置在div后面的缺点.尝试将svg z-index设置为-1时将背景颜色应用于div.

Answer 2

请添加z-index:-1到svg.

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