Skip to content

Positions In CSS

    This property Allows us to give to a position to an element! we can place an element where we want it by giving it left, right, top and bottom property! note : but the element should have position Values! Let’s talk about Position Values.

    Static :Well HTML elements have static position by default. Elements with static position is always placed to normal flow of web page Example:

    Relative: Elements which have position:’relative’ is positioned relative to its normal position. Exp: as you can see below there are 2 divs in a container if we give ‘relative’ left: 140px ;value to its position to box1 it will move the element 140px away from normal position.

    Note: If value of top/left/right/bottom is positive, element will go away from normal position, and toward to normal position, if negative!

    Absolute: The element which have position: ‘absolute’ removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor.

    exmpl: on right side the box2 is having absolute position and I gave it top:30px; so it will go 30px away from its closest positioned ancestor element that is box1. and on other side I gave position: ‘relative’ with same value it will go 30px away from its normal position!
    Fixed: element with position : fixed,is positioned relative to its viewport! Element will not be affected even on scrolling! example: In below example box1 have position : fixed with left:100px this box is fixed here. It will not be affected by other elements!
    Sticky :Elements with value sticky is positioned based on user’s scroll position. It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place.
    example :The sticky div will stick to the screen when it reach to its scroll position!