Почему я не могу поместить div поверх SVG, используя z-index

Question

У меня есть следующий плункер, и, как вы видите (я по умолчанию его открываю), объекты SVG располагаются поверх HTML. Это несмотря на наличие z-индекса -1 (я также пробовал 100).

// Navbar Component
:host.opened{
  height: 136px;
  z-index: 9999;
}
// SVG Component
this.svg = d3.select(this.elementRef.nativeElement)
  .append("svg")
  .attr("width", 1200)
  .attr("height", 400)
  .style("z-index", -1)

Как я мог заставить этот HTML-слой накладываться на SVG-слой?

Answer 1

SVG не использует z-index

Установите z-index на родительском DOM

[_nghost-qtc-0] jg-sankey {
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: -10;
}