CODEWITHSUNDEEP
cssz-indexd3.js
Jackie
Jackie

Reputation: 23597

Why can't I place a div over a SVG using z-index

I have the following plunker and as you can see (I default it to open) the SVG objects are placed over the HTML ones. This is despite having a z-index of -1 (I also tried 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)

How could I got about forcing this HTML layer over the SVG one

Upvotes: 0

Views: 503

Answers (1)

vals
vals

Reputation: 64244

Svg doesn't uses z-index

Set the z-index on the DOM parent 

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

Upvotes: 2

Related Questions