Position

Types of Positions

• Static

• Fixed

• Sticky

• Relative

• Absolute

Position

It is used to define position of a element in a page.You can set position of a element over a page using positions.There are five types of positions which are Static,Fixed,Sticky, Relative and Absolute.There are some properties which are top,bottom,right and left.Using these properties you can set the element positions.

Static

It is default value. It does not change any effect on the page.You can set top,bottom,right and left properties but it can not affect on the page. It is positioned according to the normal flow of the page.The top, right, bottom, and left properties are used to position the element.

Syntax:

position:static;

Example

In the above example does not change anything with the divisions.

Fixed

It is fixed on one place.When you are scrolling your page it does not change our position. You can fixed at any side by using top,bottom,right and left properties. It is relative to the viewport(screen size).The top, right, bottom, and left properties are used to position the element.

Syntax:

position:fixed;

Example

In the above example the division 2 is fixed at the bottom right side while you scrolling the page.

Sticky

It is stick at one place in page. It is based on the user scroll position.The top, right, bottom, and left properties are used to position the element.The navbar is stick at the bottom on page it does not change our position while you are scrolling your page.The content goes inside the navbar while scrolling the page.For example you can stick the navbar as you want to stick in the page but it can stick at that place it can't change our position while scrolling your page.

Syntax:

position:sticky;

Example

In the above example the division 3 is stick from top 10px while the page is scrolling.

Relative

It changes our positions by it's original position. It positioned relative to it's normal position. The top, right, bottom, and left properties are used to position the element.

Syntax:

position:relative;

Example

In the above example the division 2 is change our position to division 1.

Absolute

It takes position according to it's parent. It can overlap the values. It positioned to the nearest positioned element.The top, right, bottom, and left properties are used to position the element.

Syntax:

position:absolute;

Example

In the above example the division 3 is overlap with division 4.