CSS Positioning

CSS Positioning

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.

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.

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

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:

Absolute Position

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

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

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.

Definition and Usage

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