W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<body class="w3-container">

<h2>Display Positions</h2>
<p>The w3-display-container makes reference point for positioned content inside it.</p>
<p>Add a w3-display-* class to a child element to choose its position.</p>

<div class="w3-display-container w3-green" style="height:200px">
  <div class="w3-display-topleft">Top Left</div>
  <div class="w3-display-topmiddle">Top Middle</div>
  <div class="w3-display-topright">Top Right</div>
  <div class="w3-display-left">Middle Left</div>
  <div class="w3-display-middle">Middle</div>
  <div class="w3-display-right">Middle Right</div>
  <div class="w3-display-bottomleft">Bottom Left</div>
  <div class="w3-display-bottommiddle">Bottom Middle</div>
  <div class="w3-display-bottomright">Bottom Right</div>
</div>

<h3>A Custom Position</h3>
<p>Use w3-display-position with offsets to choose position like 60px from the top and 24px from the left.</p>

<div class="w3-display-container w3-text-white">
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <div class="w3-display-topleft w3-container"><p>Top Left</p></div>
  <div class="w3-display-topright w3-container"><p>Top Right</p></div>
  <div class="w3-display-bottomleft w3-container"><p>Bottom Left</p></div>
  <div class="w3-display-bottomright w3-container"><p>Bottom Right</p></div>
  <div class="w3-display-topmiddle"><p>Top Mid</p></div>
  <div class="w3-display-left w3-container">Left</div>
  <div class="w3-display-right w3-container">Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
  <div class="w3-display-position w3-tag w3-red" style="top:60px;left:24px">Custom Position</div>
</div>

<p>We have added an image, w3-container classes, and p elements to the texts.</p>

</body>
</html>