In the flow of a normal webpage, HTML elements are visible in the order that they are introduced, each one directly following the other. CSS can be used to interrupt the normal flow and force elements into different positions, or even cause them to overlap.

The method of positioning is set using the position property, after which the top, right, bottom and left properties are used to place the element in its position. The width and height properties can be used to control the size of each positioned element.

Positioning is by far the most difficult part of CSS to understand, but we will cover a few of the basics of each method of positioning, as an introduction, and then you can visit our CSS layouts page to see some positions in action.

position: static;

HTML elements are static by default, meaning that they go with the flow of the page, wherever on the page they are located. This position would only need to be set as a means to over-ride another position that has been set.

position: relative;

Relative positioning will move an element around away from the space it would normally occupy, leaving empty space.

p {
  position: relative;
  top: -20px;
  left: 20px;
}

The top and left properties in our example are set with numerical pixel values, one negative and one positive. The negative value will cause the element to move that many pixels outside (in this case out the top) of its normal position. The positive value will cause the element to move that many pixels inside (in this case inside from the left side) of its containing element.

Relative positioning may seem difficult and unnecessary now, but it can be useful when used alongside other positioning properties to create CSS layouts, for example.

position: absolute;

Absolute positioning removes an element from the normal flow of the document and places it exactly where you tell it to. The elements surrounding an element with absolute positioning act as if the element does not exist, and will move back together without leaving an empty space for the element.

Any element that is absolutely positioned will be positioned relative to the browser window unless that element is contained inside another element that has a position set that is not a static position. In other words, if the absolutely positioned element is not inside of another positioned element, then it will, by default, position itself at the top left of the window, unless you specify exactly where to position it using a combination of the top, right, bottom and/or left properties.

p {
  position: absolute;
  top: 5px;
  left: 5px;
}

This example will set our paragraph 5 pixels away from (below/inside of) the top of the browser window, and 5 pixels away from (inside of) the left side of the browser window.

position: fixed;

Fixed positions are nearly identical to absolute positions, in that they are removed from the normal flow of the document and fixed in an exact spot on the page while all other elements act as if it does not exist. The main difference between absolution positioning and fixed positioning is that a fixed position will remain in the spot on the page, even when the page is scrolled.

p {
  position: fixed;
  top: 15px;
  right: 15px;
}

This example will set our paragraph 15 pixels away from (below/inside of) the top of the browser window, and 15 pixels away from (inside of) the right side of the browser window.

Layers

Elements that are moved outside of the normal flow of the document can be caused to overlap other elements. In order to determine which of these positioned elements should be on top and which should be on the bottom, the z-index property is used.

The value of the z-index determines where in the stack that each positioned element will end up when they are overlapped. Positive numerical values indicate that the element should be moved toward the top of the stack, and negative numerical values indicate that the element should be moved toward the bottom of the stack. The higher the positive value, the higher up in the stack the element will appear. The lower the negative value, the further down the stack that the element will be squashed.

p.top {
  position: absolute;
  z-index: 5;
}

p.middle {
  position: absolute;
  z-index: 0;
}

p.bottom {
  position: absolute;
  z-index: -5;
}

Positioned properly, the z-index layers in the above example could cause an overlapping effect like the one pictured below.