CSS Positioning

Last Updated Jul 21, 2015, 12:00:06 PM





CSS Positioning

The position property specifies the type of positioning method used for an element (static, relative, fixed or absolute).

If you don't specify an element's positioning type, it defaults to static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document.

Syntax

CSS has different types of positioning methods. Let us look at each of them in detail

A positioned element is an element whose computed position property is relative, absolute, fixed or sticky.

A relatively positioned element is an element whose computed position property is relative.

An absolutely positioned element is an element whose computed position property is absolute or fixed.

A stickily positioned element is an element whose computed position property is sticky.



Static Positioning

CSS static-position is used to set every element is static positioned by default. The element resides in the normal page flow. left/right/top/bottom/z-index have no effect on a static positioned element.

Example

The above css position:static; property will produce the folowing output


css static positioning

Try It Now

Relative Positioning

Element's original position (as if it were static) remains in the flow of the document. But now left/right/top/bottom/z-index do work. The positional properties "nudge" the element from the original position in that direction.

A relative positioned element is positioned relative to its normal position:

Example Try It Now

Absolute Position

absolute-position element is positioned relative to the first parent element that has a position other than static

Example

The above css position:absolute; property will produce the folowing output


css absolute position

Try It Now

Fixed Positioning

fixed-positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.

Example Try It Now

Definition and Usage

Initial Value static
Applies to all elements
Inherited no
Media Visual
Computed Value as specified
Animatable no
Canonical Order The unique non-ambiguous order defined by the formal grammer


Browser compatibility
Feature
Basic support 1.0 1.0 (1.0) [1] 1.0 (85) 4.0 4.0 [3] ? iOS 6.1
fixed value 1.0 1.0 (1.0) [1] 1.0 (85) 4.0 7.0 ? iOS 6.1
sticky value ? 32 (32.0) 6.1 ? ? ? iOS 6.1


Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM