my item dont fixed position inside img when i drag my screen. So anyone know how to set item fixed position inside img ? There is my example : https://codepen.io/ijithaky-the-flexboxer/pen/abYxVjQ

<div >
            <img src="" alt="">
            <div >
              <span>Hàn Quốc</span>&nbsp;
              <div ></div>
            </div>
          </div>


.location .branch-HQ {
      position: absolute;
      top: 17%;
      left: 20%;
    }
    .location .branch-HQ span {
      margin-top: -10px;
      margin-right: 10px;
      font-style: normal;
      font-weight: 700;
      font-size: 24px;
      line-height: 29px;
      font-family: Montserrat-SB600;
      color: #000000;
    
    }

CodePudding user response：

Use position: absolute; for .location and the indicator will be fixed.

.location {
  position: absolute;
}

.location .branch-HQ {
  position: absolute;
  top: 17%;
  left: 20%;
}
.location .branch-HQ span {
  margin-top: -10px;
  margin-right: 10px;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  font-family: Montserrat-SB600;
  color: #000000;
}

/* CIRCLE-RIPPLE */
.circle-ripple {
  background: #0047a0;
  width: 10.84px;
  height: 10.84px;
  border-radius: 50%;
  animation: ripple 1.5s linear;
  transition-timing-function: ease-in;
  animation-iteration-count: infinite;
  transition-duration: 0.7s;
  transition: all 2.3s;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 #2971cc, 0 0 0 0.1em #2971cc, 0 0 0 0.3em #2971cc,
      0 0 0 0.5em #2971cc;
  }
  90% {
    box-shadow: 0 0 0 0.1em rgba(41, 113, 204, 0.53),
      0 0 0 0.1em rgba(41, 113, 204, 0.53),
      0 0 0 0.1em rgba(255, 255, 255, 0), 0 0 0 1em rgba(255, 255, 255, 0);
  }
}

<div >
  <img
    src="https://fuhouse.vn/uploads/images/dong-ho-panel/thi cong ban do go 3/ban-do-the-gioi-15.jpg"
    alt=""
  />

  <div >
    <span>Hàn Quốc</span>&nbsp;
    <div ></div>
  </div>

  <div ></div>

  <div ></div>

  <div ></div>
</div>