Use CSS properties to position your elements at precise points.
1. With CSS float property you can float elements out of the normal document flow, but it still depends upon where the element is in the Document.
2. But with CSS Positioning Properties you can take any element from the document flow and place it anywhere within the document, it does not matter where is appears in the HTML markup.
3. But once an element is positioned using this property, it cannot interact with other other elements around it, other elements cannot flow or wrap around it or margins be assigned to seperate it from other elements
CSS Positioning: Set the Type of Position
The positioning of an element within the document is set using the CSS position property
The detailed description of the values the position property can assume are given in below table.
Table: Values for CSS position property
|static||The element is left in its normal position.Its the default value.|
|relative||The element is positioned relative to its normal position within the
document flow, the position of other elements remains unaffected.|
|absolute||The element and its child elements are completely removed from the document flow and placed at the sepecified offset points. The offset value is calculated w.r.t to the positioned parent or the main document.|
|fixed||Similar to the absolute, but the element is positioned w.r.t to the browser's viewport.
Positioning Concepts: What is the containing block?
Any web document is made up of blocks nested inside one another, hence the position of an element is determined by its Containing block
1. For an element's position as absolute, the containing block is nearest positioned (i.e with position set as absolute, fixed or relative ) parent, or else its the main webpage.
2. For an element's position as fixed, the containing block is the browser's viewport. Its position is fixed w.r.t the browser's window
3. For an element's position as relative, the containing block is the parent element
Demo: CSS position property
Money has never made man happy, nor will it, there is nothing in its nature to produce happiness. The more of it one has the more one wants.
He that is of the opinion money will do everything may well be suspected of doing everything for money.
The offset values of Elements
The offset values for an element w.r.t to its containing block can be set to position is precisely within the document.
The offset values are applicable only if the position property is set as absolute , fixed or relative only. It values can be positive as well as negative
Table: CSS offset properties
|top||Offsets the position of the top edge of an absolute positioned element||length (px, em, cm)
|bottom||Offsets the position of the top edge of an absolute positioned element
|| length (px, em, cm)
|left||Offsets the position of the left edge of an absolute positioned element|| length (px, em, cm)
|right||Offsets the position of the right edge of an absolute positioned element|| length (px, em, cm)
Note : If nothing is specified the default value auto is applied as offset.
Example: CSS offset - top , left, right, bottomGive it a TRY! » Exercise: The offset values can be also be negative. Try negative values for the properties to notice the difference.
CSS Position: Static
1. The element with position set as static remains in the normal flow of the document. It the default value as well.
2. Offset values (top, bottom, left, right) cannot be applied to an element with position set as static
Example: CSS Position- staticGive it a TRY! » Note: An element positioned as static cannot be repositoned using offset values(top , bottom, left, right) or clipped.
CSS Position: Relative
1. The element with position property set as relative will position itself at a position had it been left alone(i.e removing the effect of surrounding elements)
2. Offset values can be applied to it, but the repositioning will be based on it position within the normal flow of the document .
Example:CSS Position relativeGive it a TRY! » Note: Offset values are applied but the element's previously occupied space is still reserved
CSS Position : Fixed
1. The element with position property as fixed will occupy a fixed position relative to the browser's viewport or window .
2. No matter how much you scroll the page upwards or downwards, the position of the element remains fixed w.r.t to the viewport.
3. All offset values are applicable
Example: CSS Position fixedGive it a TRY! » Note: The fixed element never moves w.r.t to the browser's viewport and occupies no space within the parent element
CSS Position: Absolute
1. With the position property set as absolute, the element is taken out the normal flow of the document and placed at the defined position and it remains unaffected by the position of other surrounding elements.
2. The offset values are applied to the element w.r.t to the containing-block which at times can be the main-page itself.
Example: CSS Position AbsoluteGive it a TRY! » Note:The absolute positioned element is anchored to the containing block and scrolls with the page(unlike fixed positioned).
Setting the Stacking Order: Z-Index
1. CSS property z-index enables you to assign the front-to-back order (i.e relative 3D stacking order).
2. The value for z-index is a number and negative values are allowed as well, elements with higher stacking order are positioned above the elements with lower stacking order.