javascript - Placing a d3 graph in div blocks the links above it -

i'm trying put d3 graph in background of div, copy , links above it. the svg simple area graph (no frill) deactivates/blocks links. i've tried tweaking z-index no luck. works after removing svg ..

<div class="card">     <div class="card-bg"><svg/></div>     <div class="card-top">       <div>         <div class="card-header">{{circle.name }}</div>         <div class="card-subheader">last updated {{circle.datecreated}</div>       </div>     </div>     <div class="card-body">         <a href="#" onclick=""><span>link one</span></a>         <a href="#" onclick=""><span>link two</span></a>         <a href="#" onclick=""><span>link three</span></a>         <a href="#" onclick=""><span>link four</span></a>         <a href="#" onclick=""><span>link five</span></a>     </div> </div> 

style:

.card {   background-color: white;   width: 100%;   height: 300px;   padding: 20px;   margin-bottom: 20px;   border-radius: 2px;   /* offset-x | offset-y | blur-radius | color */   box-shadow: 0px 0px 2px rgba(33,33,33,.05);   box-shadow: 0px 1px 2px rgba(33,33,33,.2);   cursor: default;   z-index:1;   position: relative; }  .card-bg {   background-color: transparent;   width: 100%;   height: 300px;   padding: 20px;   margin-bottom: 20px;   border-radius: 2px;   z-index:0;   position: absolute; } 

define position other static .card-body div. example:

.card-body {     z-index: 1;     position: relative; } 

here snippet:

.card {    background-color: white;    width: 100%;    height: 300px;    padding: 20px;    margin-bottom: 20px;    border-radius: 2px;    /* offset-x | offset-y | blur-radius | color */    box-shadow: 0px 0px 2px rgba(33,33,33,.05);    box-shadow: 0px 1px 2px rgba(33,33,33,.2);    cursor: default;    z-index:1;    position: relative;  }    .card-bg {    background-color: transparent;    width: 100%;    height: 300px;    padding: 20px;    margin-bottom: 20px;    border-radius: 2px;    z-index:0;    position: absolute;  }  .card-body {      z-index: 1;      position: relative;  }

<div class="card">      <div class="card-bg"><svg/></div>      <div class="card-top">        <div>          <div class="card-header">{{circle.name }}</div>          <div class="card-subheader">last updated {{circle.datecreated}}</div>        </div>      </div>      <div class="card-body">          <a href="#" onclick=""><span>link one</span></a>          <a href="#" onclick=""><span>link two</span></a>          <a href="#" onclick=""><span>link three</span></a>          <a href="#" onclick=""><span>link four</span></a>          <a href="#" onclick=""><span>link five</span></a>      </div>    </div>