在div中放置d3图块会阻止其上方的链接

Question

我试图在div的背景中放置一个d3图表，上面有副本和链接。 svg是一个简单的区域图（没有褶边），可以停用/阻止链接。我已经尝试过调整z-index而没有运气。删除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>

风格：

.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;
}

Answer 1

为.card-body div定义静态以外的位置。例如：

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

这是一个片段：

.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>