Positioning text on image/div using css position and transform properties

Use Case :

Sometimes we need to put some text on image/div on different positions. We can do this by using positions like below

HTML

<div class="container">
      <div class="top-left">Top Left</div>
      <div class="top-right">Top Right</div>
      <div class="center">Center</div>
      <div class="bottom-left">Bottom Left</div>
      <div class="bottom-right">Bottom Right</div>
 </div>

CSS

.container {
  font-size: 20px;
  color: red;
  font-weight: bold;    
  background-image: url("https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY");
  background-size: cover;
  width: 500px;
  height: 500px;
  position: relative;
}

.top-left {
  position: absolute;
  top: 15px;
  left: 50px;
}

.top-right {
  position: absolute;
  top: 15px;
  right: 50px;
}

.bottom-left {
  position: absolute;
  bottom: 15px;
  left: 50px;
}

.bottom-right {
  position: absolute;
  bottom: 15px;
  right: 50px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Thanks for reading this. You can follow me on YouTube