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

- Alan De Smet

---

将SVG的z-index设置为-1。 - Hoshts

可以，谢谢！现在...为什么它能工作？如果你把你的评论放到一个答案中，我会点赞，并在几天内接受它，但是，我很想接受一个告诉我为什么它会这样行事的答案，这样我就可以改进我的思维模式。我特别不知道为什么它对于兄弟姐妹，比如说，p的表现良好。 - Alan De Smet

问题实际上并不在SVG上，而是在P标签上。由于没有设置位置，因此元素上不会应用Z-index。在SVG上设置-1的替代方法是，在P标记上设置position: relative。我没有注意到那个缺少位置。 - Hoshts

Answer 1

z-index属性只对定位元素生效，为段落标签添加position: relative;可以正确应用它。

查看此页面以获取该属性的完整参考信息。

顺便提一下：正如我在评论中首先写的那样，将svg的z-index设置为-1可以降低该元素的优先级到所有元素默认值以下。这带来的缺点是，实际上svg也被放置在div的后面。尝试在将svg的z-index设置为-1时向div应用背景色。

- Hoshts

Answer 2

请在 svg 上添加 z-index:-1。

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

- Fazil Abdulkhadar

---

最好使用被接受的答案。 - Mikkel R. Lund

Answer 3

根据Fazil Abdulkhadar的建议，添加z-index: -1对我没有用，因为我有一个背景。因此，我的svg将在我的背景后面。

根据Hoshts的建议，我在我想要放在绝对定位的svg前面的元素上加上position: relative;。

对于这个问题的示例，代码如下：

p {
   position: relative; // add it
   width: 200px;
   /* z-index: 10; */ // change it to z-index: 1;
}
div {
   position: relative; // not sure it is necessary
}
svg {
   position: absolute;
   left: 0;
   top: 0;
   /* z-index: 1; */ // remove it
}

- Hugo Bayoud

---

谢谢！其他解决方案对我也没有用，因为我还有一个背景图片。 - MikhailRatner

你是个救星。这是唯一有效的方法。在我的 SVG 上使用 z-index:1 似乎会使 div 截断 SVG 底部。 - Badr B