CSS Position Properties

The values for position property are:

Position:static
  • HTML elements are positioned static by default.
  • Static position elements are not affected on top, bottom, left and right properties.
  • It is always positioned according to the normal flow of the page.
Position:relative
  • It changes the position from its normal position.
  • Position:relative set using top, right, bottom and left properties.
Position:fixed
  • Its fixes the position of the element to the same place even if the page is scrolled.
  • The top, right, bottom and left properties are used to position the element.
  • It does not leave a gap in the page where the page is normally located.
Position:absolute
  • It defines the pixel value where the specified HTML will appear.
  • The point of origin is the top-left of the browser.
Note: A “position” element is one whose position is anything except static.

Example: Demonstration of position property

<!DOCTYPE html>
<html>
     <head>
          <style>
               div.static
               {
                    position: static;
                    width: 260px;
                    border: 3px solid green;
               }
               div.relative
               {
                    position: relative;
                    width: 300px;
                    height: 25px;
                    border: 3px solid orange;
                    left: 20px;
                    top: 5px;          
               }
               div.absolute
               {
                    position: absolute;
                    width: 260px;
                    height: 20px;
                    border: 3px solid green;
                    top: 135px;
                    left: 40px;
               }
               div.fixed
               {
                    position: fixed;
                    top: 165px;
                    left: 10px;
                    width: 250px;
                    border: 3px solid orange ;
               }
          </style>
     </head>
     <body>
          <h2>Position property</h2>
          <div class="static">
               This div element has static position.
          </div>
          <div class="relative">
               This div element has a relative position.
          </div>
          <div class="absolute">
               This div element has a absolute position
          </div>
          <div class="fixed">
               This div element has a fixed position.
          </div>
     </body>
</html>


Output:
position property
▲