脉动的CSS圈子始终位于顶部

Question

我已经在这个地方呆了一段时间了，我似乎无法弄清楚如何解决它。我有一个应该被用户按下的圆圈，但我希望后面有另一个可以跳动的圆圈。当BG圆未设置为脉动时，其显示在主圆的后面，但是当我将其设置为脉动时，它将移至顶部。

    .mainClick{
      border-radius: 50%;
      background-color: rgba(75,75,75, 1);
      width: 150px;
      height: 150px;
      margin: 0 auto;
      transition: 0.5s;
      z-index: 2;
      margin-top: -185px;
    }
    
    
    
    .mainClick:hover{
      background-color: rgba(75,75,75, 0.1);
    }
    
    
    
    .dot {
      border: 50px solid rgba(100, 200, 100, 1);
      background: transparent;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      /*  -webkit-animation: pulse 3s ease-out;
      -moz-animation: pulse 3s ease-out;
      animation: pulse 3s ease-out;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      animation-iteration-count: infinite;*/
      margin: 0 auto;
      transition: 0.5s;
      z-index: 1;
    }
    
    @-moz-keyframes pulse {
     0% {
        -moz-transform: scale(0);
        opacity: 0.0;
     }
     25% {
        -moz-transform: scale(0);
        opacity: 0.1;
     }
     50% {
        -moz-transform: scale(0.1);
        opacity: 0.3;
     }
     75% {
        -moz-transform: scale(0.5);
        opacity: 0.5;
     }
     100% {
        -moz-transform: scale(1);
        opacity: 0.0;
     }
    }
    
    @-webkit-keyframes "pulse" {
     0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
     }
    
     25% {
        -webkit-transform: scale(0.5);
        opacity: 0.5;
     }
     100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
     }
    }

    <div class="dot"></div>
    <div class="mainClick"></div>

JSFIDDLE：

https://jsfiddle.net/a8cwo5ne/