Untitled

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CSS Example by itsRems</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="top-50 fixed">
      <p>This text is 50 pixels away from the top border.</p>
    </div>
    <div class="left-50 fixed">
      <p>This text is 50 pixels away from the left border.</p>
    </div>
    <div class="right-50 fixed">
      <p>This text is 50 pixels away from the right border.</p>
    </div>
    <div class="bottom-50 fixed">
      <p>This text is 50 pixels away from the bottom border.</p>
    </div>
    <div style="text-align: center;">
      <p>All those paragraphs have the "fixed" position tag. That means they'll stay at that position whatever happends: scroll, resizing of the web browser,...</p>
      <p>If you simply want them to be at the position, use <code>position: absolute;</code></p>
      <p> If you want them to keep the last div's properties, use <code>position: relative;</code></p>
    </div>
  </body>
</html>