javascript - 在 div 中放置一个 d3 图表会阻止其上方的链接

Question

我正在尝试将 d3 图表放在 div 的背景中，上面有副本和链接。 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>