POSITIONING TEXT OVER IMAGE
Run 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
	.container {
	  position: relative;
	  width: 300px;
	  height: 300px;
	  background: blue;
	}
	.text-top {
	 position: absolute;
	 color: white;
	 top: 5px;
	 left: 40%;
	 
	}
	.text-bottom {
	 position: absolute;
	 color: white;
	 bottom: 3px;
	 left: 40%;
	 
	}
	.text-left {
	 position: absolute;
	 color: white;
	 left: 10px;
	 top: 10px;
	 
	}
	.text-right {
	  position: absolute;
	  color: white;
	  right: 10px;
	  top: 10px;
	}
</style>
</head>
<body>
    <h2> Positioning the text over image</h2>
	<div class="container">
	 <img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/user/profile/picture/iamabhishek1622449489_profile.png" alt="image">
	 <h4 class="text-top"> Text-top </h4>
	 <h4 class="text-bottom"> Text-bottom </h4>
	 <h4 class="text-left"> Text-left </h4>
	 <h4 class="text-right"> Text-right </h4> 
	</div>
</body>
</html>