Почему я не могу разместить div над SVG с использованием z-индекса

Question

У меня есть following plunker, и, как вы можете видеть (по умолчанию он открывается), объекты 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-индекс

Установите Z-индекс на родителе DOM

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