This article is aimed at experienced CSS developers who need a reference for the properties related to positioning in CSS 2. Each section of this article includes a link to the relevant section of the CSS 2 Specification.
This article is not intended to cover all of the positioning stuff in the Specification in depth but to only cover those properties and their values that are implemented in some or all modern browsers and are of real-world use to you today.
First I will give a few definitions, there are some concepts that need to be explained, you can use this to check back if you stumble on something or just read it now if you prefer.
Relatively positioned elements are positioned according to the normal flow and then moved. Elements that come after behave as if the relatively positioned element was in its 'normal flow' position, even if this means they occupy the same screen space.
Boxes positioned using float are positioned using normal flow and then moved left or right as far as they can go. Elements after them will move up to fill any gap left behind but will flow around them and will not occupy the same screen space.
All positioning schemes need you to set these in order to know how to carry out your positioning request. You should always set one of 'top' or 'bottom' and one of 'left' or 'right'. Setting both 'top' and 'bottom' or both 'left' and 'right' will not usually do what you want and will usually end up with only 'left' or 'top' being used respectively.
You may use the following values for these properties:
You may use a fixed distance such as 20px for 20 pixels.
You may use a percentage value such as 20%, which is 20% of the containing block's width, or height value (for left/right or top/bottom respectively).
The 'z-index' property is used to specify how boxes stack 'on top' of each other and is relevant when you have two boxes that occupy the same screen space. 'z-index' accepts a value between 0 and 32767. In a situation where two boxes occupy the same screen space the box with the highest 'z-index' is displayed 'on top'. If both have the same value the one that comes first in the code is displayed on top.
At MIS Web Design we believe in matching the right skills to the right project. We feel that by having a large in-house development team we are able to assign the perfect selection of individuals that suit your project.