Absolute element moving away from image-CodePudding

Can I somehow make the absolute element stay at the same position all the time even when the parent(relative) image is adjusting its size to screen? At the moment I am using px to use position of elements, its fine on huge screen, but whenever the image gets smaller the absolute elements wont stick to the same position. Also I tried using <img></img> and put elements inside it and make the img as relative, but I think these tags dont work.

.img {
  width: 100%;
  height: auto;
}

.container {
  position: relative;
}

.container > p {
  position: absolute;
  left: 300px;
  bottom: 200px;
}

<div >
  <img src="https://pngimg.com/uploads/surfing/surfing_PNG9721.png" >
  <p>Im absolute
  </p>
</div>

CodePudding user response：

use percentage and for font-size use clamp()

.img {
  width: 100%;
  height: auto;
}

.container {
  position: relative;
}

.container > p {
  position: absolute;
  left: 22%;
  bottom: 48%;
  color : white;
  font-size: clamp(5px,2vw,3rem);
}

<div >
  <img src="https://pngimg.com/uploads/surfing/surfing_PNG9721.png" >
  <p>Im absolute
  </p>
</div>

CodePudding user response：

Try removing the "position: relative;" of the container. Your p tag is absolute respect the container because of that. Removing relative in container, the absolute is refered to the document.

.img {
  width: 100%;
  height: auto;
}

.container > p {
  position: absolute;
  left: 300px;
  bottom: 200px;
}

<div >
  <img src="https://pngimg.com/uploads/surfing/surfing_PNG9721.png" >
  <p>Im absolute
  </p>
</div>