score:2

Accepted answer

define a position other than static for your .card-body div. for example:

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

here a 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>


Related Query

More Query from same tag