CSS Position Properties

The values for position property are:

  • 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.
  • It changes the position from its normal position.
  • Position:relative set using top, right, bottom and left properties.
  • 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.
  • 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>
                    position: static;
                    width: 260px;
                    border: 3px solid green;
                    position: relative;
                    width: 300px;
                    height: 25px;
                    border: 3px solid orange;
                    left: 20px;
                    top: 5px;          
                    position: absolute;
                    width: 260px;
                    height: 20px;
                    border: 3px solid green;
                    top: 135px;
                    left: 40px;
                    position: fixed;
                    top: 165px;
                    left: 10px;
                    width: 250px;
                    border: 3px solid orange ;
          <h2>Position property</h2>
          <div class="static">
               This div element has static position.
          <div class="relative">
               This div element has a relative position.
          <div class="absolute">
               This div element has a absolute position
          <div class="fixed">
               This div element has a fixed position.

position property