Search within TutorialsPark

CSS Positioning


Use CSS properties to position your elements at precise points.


CSS Positioning

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

Property Description
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.

dollar

He that is of the opinion money will do everything may well be suspected of doing everything for money.

position:

Note: The position of an element depends upon what its containing block is .

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

Property Description Value
top Offsets the position of the top edge of an absolute positioned element length (px, em, cm)
percentage(%)
auto
bottom Offsets the position of the top edge of an absolute positioned element
length (px, em, cm)
percentage(%)
auto
left Offsets the position of the left edge of an absolute positioned element length (px, em, cm)
percentage(%)
auto
right Offsets the position of the right edge of an absolute positioned element length (px, em, cm)
percentage(%)
auto

Note : If nothing is specified the default value auto is applied as offset.

Example: CSS offset - top , left, right, bottom

Give 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- static

Give 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 relative

Give 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 fixed

Give 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 Absolute

Give 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

Z-index:1

Z-index:2

Z-index:0 (initial)

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.

Example: CSS Stacking Order Z-Index

Give it a TRY! » Note:The z-index is always relative to the sibling and never to its parent.