親要素のSVGが角型テンプレートの子要素のSVGと重複します

Question

角型テンプルでSVGを使用しようとしています。ただし、ルータのアウトレットの親要素には、背景イメージとしてSVGがあります。何らかの理由で、背景画像が子要素のSVGと重なっています。私はDOMツリーのスクリーンショットを含んでいます。 SVGを保持する2つのオブジェクト要素を見ることができます。

親要素でSVGオブジェクトを追加した後、それは子供が重なっ：

次に、親SVGが添加されていない子要素でSVGのスクリーンショットでありますSVG：

私はSVGのwoのを想定しuldはDOMに配置された順序でレンダリングされます。私は何かが足りないと思う。誰がなぜこれが起こっているのか知っていますか？

Answer 1

試してみてください。

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