What positioning values should I be familiar with?


#1

Question

What positioning values should I be familiar with?

Answer

Web developers should be familiar with:

position: static;

  • default position
  • positioned according to normal flow of HTML document
  • offset properties (top, right, bottom, left) and z-index property have no effect

position: relative;

  • positioned according to normal flow of the document (not taken out of the normal flow)
  • will be affected by offset properties (top, right, bottom, left) and z-index
  • if offset properties are used, the element will be offset in relation to its default position

position: absolute;

  • element is taken out of the normal flow of the document
  • positioned in relation to its nearest positioned parent element (grandparent, etc),
  • if no positioned parent element exists, the absolutely positioned element will be positioned in relation to the <html> element
  • will be affected by offset properties (top, right, bottom, left) and z-index

and

position: fixed;

  • element is taken out of the normal flow of the document
  • positioned in relation to the viewport of the browser
  • will be affected by offset properties (top, right, bottom, left) and z-index