How to use position in CSS

There are four different position values:

  • ¬†static
  • relative
  • fixed
  • absolute

div.static {
    position: static;
    border: 3px solid #555;
}

div.relative{
    position: relative;
    border: 3px solid #555;
}

div.fixed{
    position: fixed;
    border: 3px solid #555;
}

div.absolute{
    position: absolute;
    border: 3px solid #555;
}

HTML main tag

 

<html>
<head>
<style type="text/css">
header, article, footer, main, nav {border:1px solid orange;padding:3px;width:50%;} 
</style>
</head>
<body>
<header>Header...</header>
<main>
Main...
<article>Article...</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</body>
</html>

Eg. :

Header…

Main…

Article…

Footer…