positioning

Introduction

CSS can be used to position elements on a web page.
There are several ways to position elements, including:

• Static: The default position of an element. It follows the normal flow of the document.
• Relative: The element is positioned relative to its normal position.
• Absolute: The element is positioned relative to its nearest positioned ancestor.
• Fixed: The element is positioned relative to the viewport, which means it stays in the same place even when the page is scrolled.

<style>
  .box {
	background-color: lightblue;
	padding: 10px;
  }

  .box.static {
	position: static;
  }
</style>

Code - Relative

<style>
  .box {
	background-color: lightblue;
	padding: 10px;
  }

  .box.relative {
	position: relative;
	top: 20px;
	left: -30px;
  }
</style>

Output

<style>
  .box {
	background-color: lightblue;
	padding: 10px;
  }

  .box.absolute {
	position: absolute;
	top: 20px;
	left: -30px;
  }
</style>

Code - Fixed

<style>
  .box {
	background-color: lightblue;
	padding: 10px;
  }

  .box.fixed {
	position: fixed;
	right: 20px;
  }
</style>

Output