Positioning in CSS

Category	: CSS		Views	: 12975
Version	: 2.0		Rating	:	2.8/5 (62 votes) Currently 2.81/5 1 2 3 4 5
Type	: Text

The web designer may want to define when programming in CSS the exact position of the element boxes relative to other elements or even the browser window; their normal position can also be changed. There are different sorts of positioning in CSS and the next fragment will develop on how many types are there and how they differ one from another.

Various types of positioning

There are four types of positioning available in CSS. By using the position property, one can chose how the element’s box will be created. The position property has five values: static, relative, absolute, fixed, inherit.

When the static value of the position property is used, the box will be created normally. A rectangular block will be generated which is part of the document’s flow. Inline-level boxes cause the creation of line boxes which are flowed within their parent element.

When the relative value is attributed to the position property, the element’s box will be offset by some distance. The new generated element will retain the shape it would have had if it had not been positioned.

Another value the position property can be attributed is absolute. When this value is used, the element’s block is removed from the flow of the document completely. It will be positioned with respect to its containing block. This may be a different element in the document or the initial containing block. The space the element’s block would have occupied if the absolute value of the position property would have not been used is closed. The document’s aspect is exactly that as if the element would have not existed. A block-level box of the positioned element is created by using this value and the type of box it would have generated if it would have been in a normal flow does not matter.

The final value the position property can have is fixed. When used, the element’s box position is the same as the one when the absolute values are used but its containing block is the view port itself.

The containing block

CSS 2.1 defines the following behaviors when dealing with positioning:

The containing block of the initial block (also known as the "root element") is set by the user agent. In HTML this element is the html element. Most browsers use as initial element a rectangle the size of the view port.

The containing block of an element which has the relative or static values attributed to the position property if formed by the content edge of the nearest block-level, inline-block ancestor box or table cell.

The containing block of an element which has the absolute value of the position property is set to the nearest ancestor that has a different then static position value. There are two scenarios in this case. The ancestor is block level. In this case, the containing block is set in accordance to that element’s padding edge. The second case is when the ancestor is inline-level. In this scenario, the containing block is set accordingly to the edge of the ancestor. In programming languages that use writing from left to right, the top and left of the containing block are set to be the top and left content edges of the first box in the ancestor. The bottom and right edges are the bottom and right content edges of the last box.