如何使z-index=1的元素，在css中响应。

Question

我正在使用这里描述的代码，在密码笔我使用的是美国地图的图片，而不是世界地图。但是由于这里的代码在点上使用z-index=1，所以它们没有得到响应。

我试过了vh和vw，试过了百分比，但是当我调整我的屏幕大小时，这些点就会到处乱跑。

有谁能帮帮我，如何让这些小点响应？我只是想让它们留在地图上，不管在地图上的什么地方。

注：如果你有其他方法实现同样的事情，请提及。

下面是codepen上的代码。HTML:

<div id="map">
  <div class="img-container">
      <img src="http://res.cloudinary.com/reddelicious/image/upload/v1496891721/map_no-dots_mptb8a.png" alt="Map">
  </div>
  <div id="dots">
      <div class="dot dot-1"></div>
      <div class="dot dot-2"></div>
      <div class="dot dot-3"></div>
      <div class="dot dot-4"></div>
      <div class="dot dot-5"></div>
      <div class="dot dot-6"></div>
      <div class="dot dot-7"></div>
      <div class="dot dot-8"></div>
      <div class="dot dot-9"></div>
      <div class="dot dot-10"></div>
      <div class="dot dot-11"></div>
      <div class="dot dot-12"></div>
      <div class="dot dot-13"></div>
      <div class="dot dot-14"></div>
      <div class="dot dot-15"></div>
      <div class="dot dot-16"></div>
      <div class="dot dot-17"></div>
      <div class="dot dot-18"></div>
      <div class="dot dot-19"></div>
      <div class="dot dot-20"></div>
      <div class="dot dot-21"></div>
  </div>

CSS:

/* Original pulsing dots by sharla */

@keyframes pulse 
  0% box-shadow: 0px 0px 0px 0px rgba(52, 106, 180, 1); 
  100% box-shadow: 0px 0px 0px 7px rgba(52, 106, 180, 0.0);


body 
    background-color: #111114;


img 
    width: 100%;
    max-width: 100%;


#map 
    position: relative;
    max-width: 1280px;
    margin: 0 auto;


.dot 
    width: 9px;
    height: 9px;
    border-radius: 50%;
    animation: pulse 1.5s infinite ease-out;
    background: #346ab4;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    &:before 
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: rgba(255, 255, 255, 0.4);
    
    &:nth-child(odd)  
        animation: pulse 1.5s infinite ease-out 0.3s; 
    
    &-1  top: 34%; left: 14.5%; 
    &-2  top: 43%; left: 15.5%; 
    &-3  top: 51%; left: 20.5%; 
    &-4  top: 61%; left: 27%; 
    &-5  top: 68%; left: 29%; 
    &-6  top: 79%; left: 29%; 
    &-7  top: 39%; left: 47%; 
    &-8  top: 30%; left: 46%; 
    &-9  top: 27%; left: 47%; 
    &-10  top: 31%; left: 47.5%; 
    &-11  top: 34%; left: 48.5%; 
    &-12  top: 47%; left: 53%; 
    &-13  top: 56%; left: 47.5%; 
    &-14  top: 78%; left: 53%; 
    &-15  top: 56%; left: 76%; 
    &-16  top: 62%; left: 78%; 
    &-17  top: 41%; left: 79%; 
    &-18  top: 52%; left: 70%; 
    &-19  top: 26%; left: 51.5%; 
    &-20  top: 39%; left: 27%; 
    &-21  top: 82%; left: 88.5%; 

    @media (min-width: 768px) 
        width: 16px;
        height: 16px;
        &:before 
            width: 4px;
            height: 4px;
        
        @keyframes pulse 
            0% box-shadow: 0px 0px 0px 0px rgba(52, 106, 180, 1); 
            100% box-shadow: 0px 0px 0px 10px rgba(52, 106, 180, 0.0);