Day -16 (position)

CSS Position

• CSS positioning is about controlling the placement of elements within a web page.

• Theposition property specifies the positioning type for an element.

Static

• This is default. Element is positioned according to the normal document flow.

• this cannot be moved

• here(top,bottom,left,right)cannot be functioned.

relative

• is positioned relative to its normal position in the document flow.

• this will not affect others

• here(top,bottom,right,left) will be used

• z-index will be use here to define the position of layer

EXAMPLE

from above i have used z-index in blue box ( z-index 2) that will come first .

Absolute

• The element is removed from the normal document flow, and no space is created for the element in the page layout.

• It does not affect other elements in the flow.

Sticky

• The sticky element stays at the given viewport as you scroll but only within its containing element.

• Sticky positioning switches between relative and fixed based on the scroll position.

Fixed

• The fixed will stay fixed in the assigined position while scroll and at every time