Position html elements

 There are 4 ways of positioning HTML elements. 

1. Fixed
2. Absolute
3. Relative
4. Static

We can set these positions using position property. 

Relative: Position changes with respect to current position. 

Example: 

img{

            height: 100px;

            width: 100px;

            position:relative;

            bottom:200px;

            left:300px;  

        }

This moves img element towards 200px towards top (assume 200px space is occupied from bottom) , 300px towards right(assume 300px space is occupied from left , so element move towards right).

Absolute: this position properties is set based on the nearest ancestor which is non-static. 

Here, there are two div d21 and d22 inside d2 which is static by default. So, setting d21 as absolute will have side effect of setting d22 frame with respect to nearest ancestor which is body of the page by default. 

 

Here ancestor of d22 is d2, if we set d2 other than static, then d22 (blue Box) is set as per that.

Let's say if we set d2 Block which is relative to align 400px left, then whole d21 and d22 element (which are absolute) will allign with d2. 

Fixed: When an element is set as fixed, its position is ignored by other elements. 

Here, d1 block is set to fixed, so it is ignored by other element and they align assuming d1 is absent. 

Orange box is occupied by other elements.

Orange box is fixed and other element defined after d1 will be overlapping above d1(orange box). 

To manage the layering, we can use z-index property.