CSS Positioning Tutorials

Learn how to position HTML elements to create CSS-based web page layouts and to position elements within web pages.

CSS position properties in combination with the top or bottom and/or left or right properties allow you to position HTML elements. These properties allow you to create CSS-based web page layouts and also to position the content within the web pages wherever you like.

CSS Static Positioning Tutorials
Learn how HTML elements are positioned in their normal, static position, within the normal flow of content.

CSS Relative Positioning Tutorials
Learn how to move HTML elements from their original static position to a relative position using the property and value pair of "position:relative;" in combination with the top or bottom and/or right or left properties.

CSS Fixed Positioning Tutorials
Learn how to position HTML elements in fixed position susing the property and value pair of "position:fixed;" in combination with the top or bottom and/or right or left properties.

CSS Absolute Positioning Tutorials
Elements that are positioned using the absolute property are removed from the normal flow of elements and can be placed anywhere on the web page using the top or bottom and/or right or left properties. Other elements behave like elements that have an absolute position do not exist. Elements that have an absolute position are positioned relative to the first parent element that contains it that has a position other static. If there is no parent element with a position other static, the containing block is <html> element.

The possible values of the positioning properties top or bottom and/or left or right are listed below.

NOTE: Statically positioned elements are not affected by the top or bottom and/or left or right properties.

CSS Positioning Properties

There are 4 CSS positioning methods and they are listed below.

Property Description
Static By default, HTML elements are positioned statically within web pages. This means that the elements appear one after another in the same order in which they are within the document. Statically positioned elements are not affected by the top or bottom and/or left or right properties.
Relative Relative positioned elements begin in a static position. They can be moved from their original static position with the use of the top or bottom and/or right or left properties and they can overlap other elements.
Fixed HTML elements that have a fixed position are positioned relative to the web browser window and stay in the same fixed position, even if the web page is scrolled up or down. CSS allows you to position elements with the use of the position property with a value of fixed, in combination with the top or bottom and/or left or right properties.
Absolute Elements that are positioned using the absolute property are removed from the normal flow of elements and can be placed anywhere on the web page using the top or bottom and/or right or left properties. Other elements behave like elements that have an absolute position do not exist. Elements that have an absolute position are positioned relative to the first parent element that contains it that has a position other static. If there is no parent element with a position other static, the containing block is <html> element.

Positioning Offset Properties

Positioning Offset Properties Values
top, right, bottom, left length values, percentage values, auto, the initial value is auto