Absolute Positioning

Most of the time you will use the default positioning for your web layout. When you need something to be positioned in an very specific spot you would use absolute positioning. For instance you may want to have an image with an overlapping caption that always sits at the top of the picture (say 20px from the top). You could also want to have a product image with an overlapping price that always appears at the bottom right of the image. These would be great uses of absolute positioning because you want the caption/price to always appear in a very specific location.

The two examples discussed are shown on this page. Notice that the figures have a position of relative. This is because absolute positioned elements are originally positioned according to the browser window, unless a parent element has a absolute, relative or fixed position. So if we used a static or default position the caption or price wouldn't be positioned in relationship to the location of the image, but instead to the location of the edges of the browser (in this case the playground we are using). We used a relative position in this example because we wanted the images to still take up their original space on the page. Take a minute to change the position of the figure to see what the different positioning schemes (static, absolute, relative, fixed) will do to the content.

Avoid using absolute positioning to make simple columns or placing elements of the page to the left or right of other elements (This would be accomplished with floats or inline-block elements).