CSS: absolute positioning and element dimensions

Many developers who start coding in CSS and try to use absolute positioning are not always aware of the fact that every single property used by the absolute positioning model affects the overall dimensions of the element where they're applied. In the absolute positioning model there are four properties: top, right, bottom and left. top and bottom affects the computation of the actual height of the containing block, while left and right modify such computation for the width of the containing block.

For example:

#container {
  position: relative;
  width: 400px;
}

#pos {
  position: absolute;
  top: 0;
  left: 20px;
  width: 390px;
}

In this case the child element, pos, will overflow its parent container because the global width of its containing block is 410 pixels, that is, left (20px) + width (390px). The same process applies also to the height of the containing block, but in this case the properties involved are top (or bottom) and height.

You can find many tests on this topic here.