• in a web page define the position of the element. means where is the element? how will be element?

• there is four type of Positions Property.

  1.static(default) 2.relative 3.fixed 4.absolute

• there is four property which apply here : top ,bottom, left, right

1.static(default)

• its a normal flow

2.relative

• in relative the element will be flow as per your given property with the focus of the actual position
• when you give 2nd element{ position : relative; top:50px; left:50px;}
• in relative position you will not give the any property then it will be there nothing happen also you give any property but they can’t allow any other element in their default value
• relative count from their original position

3.absolute

• its start his calculation from the parent positioned (POSITIONED = when the position property applied on them and its not a static its must be absolute, relative). if they are not positioned then its start from the nearest parents positioned.
• if he is not get parent positioned element then its start from the body element
• also when you just applied position: absolute and don't give any property still its losses is original space but just visually show and other element take that place

4.fixed

• fixed position used when we want to fixed some element as per our viewport
• fixed left his space as soon as the position: absolute apply

Z-INDEX & LAYER

• z-index work only when position is fixed, relative & absolute
• the more higher number the z-index is that effective

when z-index not apply

when z-index apply