Placement on the Page

The next property to explore as we learn how to build layouts is position (position: ).

The position property allows developers to specify how elements are positioned in the browser window.

Box Offset Properties

The position: property sets the type of “layout flow” elements will follow. When set to a value that allows for the relative or specific positioning of elements, developers can use the following “box offset properties” to set those positions;

  • top:
  • bottom:
  • left:
  • right:

Depending on the value of the position: property, these will act in different ways. However, they basic function serves to set the position of an element, through either relative units (i.e. em, %) or absolute units (i.e. px).