CSS Position Property

The CSS position property can have a few values like, 

  • static
  • absolute
  • fixed
  • relative
  • initial
  • inherit

position: static; is the default value. It means that's what normally happens if you basically do nothing. In this case, the element renders in the browser window in the normal way as it should appear in the normal document flow. In this case, the browser is going to be responsible for the position of your element and that elements don't overlap or create problems. In some other cases like position: absolute for instance, you basically take the element out of the normal document flow and then you're responsible for the positioning of the element, not the browser anymore. So if you set it to position: static, you don't have to worry about any such problems. 

Position: absolute; causes an element to be positioned relative to another parent element that has been positioned absolute, fixed or relative.

Read more about position: absolute; 

position: fixed causes the element to be positioned relative to the browser window. 

Read more about position: fixed; 

position: relative; causes the element to be positioned relative to its own normal position. 

Read more about position: relative; 

position: initial; is used to set the position CSS property value to its default value, i.e., static. The CSS keyword initial can be used for all CSS properties and on all HTMl elements. IE versions 8, 9 and 11 and also Opera Mini don't understand it -according to caniuse.com

position: inherit; - The inherit keyword specifies that a property should inherit its value from its parent element. In this case, whatever the value of the position property of the parent element is, that value would be assigned to the position property of the element on which position: inherit; is implemented. It's complicated sentence so to simplify, take a look at an example at w3schools.com (at w3schools.com, click the green button that says, "Try it yourself" and you'll see a good example).