html - 如何将 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 block 。

Answer 1

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

看this page以获得该属性的完整引用。

旁注:正如我最初在评论中所写的那样，将 svg z-index 设置为 -1 是可行的，因为它将元素的优先级降低到所有元素都具有的默认值以下。这带来了 svg 实际上也被放置在 div 后面的缺点。尝试将背景色应用于 div，同时将 svg z-index 设置为 -1。