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;添加到段落标记将正确应用它。

请查看this page以获取该物业的完整参考资料。

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

Answer 2

请在svg。

中添加z-index:-1

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

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

2 个答案: