Position properties

Position properties allow to layout the element boxes on the page. There are two of these properties, position and float. The first one has four possible values:

• static: this is the default value. The boxes will show up in the order that you placed them in the document.
• relative: the browser first lays out the elements in the normal flow and then displaces them by the amount specified by the left or right properties and the top or bottom properties. The left property specifies the displacement from the left border with respect to the position where the elements should have appeared, and similarly for the other properties. If both left and right (respectively, top and bottom) are given, the first one is considered. A gap is left in the normal flow where the elements should have appeared. For instance, the following rules, when applied to the recipe example, have the effect of placing a vertical space of 2 ems between title, ingredients, directions, and story elements and moving to the right the ingredients of 1 em.

  ingredients {
    position: relative;
    top: 2em;
    left: 1em;
  }
  
  directions {
    position: relative;
    top: 4em;
  }
  
  story {
    position: relative;
    top: 6em;
  }
  

  Here is the result.
• absolute: this value absolutely positions the element box in the containing box. The containing box is the nearest ancestor with a position property value different from the default. The effect is that the box is taken out of the normal flow and it is absolutely positioned on the page regardless of its position in the document and regardless of the position of the other elements in the page. Unlike relative position, the gap left by the elements is closed up by the other elements. The displacement of the element box is specified by the left, right, top, and bottom properties. The left property specifies the displacement from the left border of the containing box, and similarly for the other properties. Unlike relative positioning, absolute positioning allows an element to change size. Hence, all the four properties are meaningful. As an example, the following rules change the layout of the recipe example:

  ingredients {
    position: absolute;
    top: 3em;
    left: 1em; 
  }
  
  directions {
    position: absolute;
    top: 3em;
    left: 20em; 
  }
  
  story {
    position: absolute;
    bottom: 1em;
    left: 5em; 
    right: 5em;
  }
  

  Here is the new layout. Notice that, if you change the font size in the browser page, the ingredients and directions elements never overlap. This is because we have used a relative length unit (ems) to position the elements. However, the story element may overlap with the ingredients and directions elements if the font size is sufficiently big. We will see how to solve this problem with the float property.
• fixed: this is the same as absolute with the exception that the containing box is always the screen window in case of continuous media or the page in case of paged media. A fixed box does not move when a web page is scrolled as all other elements do. An example of fixed box is the side menu of the web page that you are reading now in the style Fixed, Top-Left.

The float property allows to make floating boxes. It has two values, left and right. A box that is required to float left (respectively, right) is moved left (respectively, right) as far as possible. The following elements floats around the box with the float position. For instance, in our recipe example, we can float the ingredients to the left and let the directions and story elements float around. The only rule that we need is this (the paddings are not necessary):

ingredients {
  float: left;
  padding-right: 1em;
  padding-bottom: 1em;
}

Here is the new layout. Notice that the elements do not overlap anymore whatever is the font size. The clear property specifies which side of a box should not be adjacent to other floating boxes. For instance, if we want to place the story element always below the ingredients, we can add this rule:

story {clear: left;}