如何使z-index=1的元素响应于css

Question

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

我试过vh和vw，尝试了百分比，但是当我调整屏幕大小时，圆点就到处都是。

有人能帮助如何使这些点响应吗？我只想让他们留在地图上，不管地图上在哪里。

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

下面是codepen上的代码：

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

Answer 1

这似乎对我有很好的反应。您可以使用vh，但我认为您忘记了删除媒体height和width属性。当height和width与视口相对应时，不必在媒体查询中更改它

@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: 5vh;
    height: 5vh;
    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: 1vh;
        height: 1vh;
        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) {
        @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);}
        }
    }
}