父元素中的SVG与Angular模板中的子元素中的SVG重叠

Question

我试图在Angular模板中使用SVG。但是，路由器插座的父元素具有SVG作为背景图像。由于某种原因，背景图像与子元素中的SVG重叠。我已经包含了DOM树的截图。你可以看到两个持有SVG的对象元素。

接下来是未添加父SVG时子元素中SVG的屏幕截图：

在父元素中添加SVG对象后，它与子SVG重叠：

我假设SVG将按照放入DOM的顺序呈现，这对我来说很有意义。我想我错过了一些东西。有谁知道为什么会这样？

Answer 1

尝试：

.landing-page-hero {
    position: relative;
    z-index: -1;
}