css - 为什么我不能使用 z-index 在 SVG 上放置一个 div

Question

我有 following plunker如您所见(我默认打开它)，SVG 对象放置在 HTML 对象之上。这是尽管 z-index 为 -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

在 DOM 父级上设置 z-index

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