|| POSITION IN CSS ||

Positioning in CSS is used to set the positions of the element. It set the element according to the property of left , right , top , and bottom .

PROPERTIES- Determine the final location of positioned elements.

SYNTAX

{property}: {value};

i.e.,

position: static,
position: relative;
position: absolute;
position: fixed;
position: sticky;

TYPES OF POSITIONS IN CSS

• STATIC POSITIONING (BY DEFAULT)
• RELATIVE POSITIONING
• ABSOLUTE POSITIONING
• FIXED POSITIONING
• STICKY POSITIONING

LET'S HAVE A FAST LOOK ON TYPES OF POSITION

STATIC POSITIONING

The position of element is set by the property Static Positioning gives the default value i.e., the position of element is not effected by the property of left , right , top , and bottom .

SYNTAX

position:static;

The above live server shows that the red box is not affected by the top, bottom, left and right properties.

RELATIVE POSITIONING

If the property is taken to be Relative Positioning , then the element is effected by the property of left , right , top , and bottom . It leave a gap at its normal position. The element will move according to its relative position.

SYNTAX

position:relative;

The above live server shows that the red box is affected by the left and top property i.e., the left and top property applied in the code. Here, red box moves according to its normal position i.e., moves 100px from top and 80px from left of the normal position.

ABSOLUTE POSITIONING

If the property is taken to be Absolute Positioning , then the element is effected by the property of left , right , top , and bottom . The element will move relative to its first parent position.

SYNTAX

position:absolute;

Here, red box moves according to its first parent position i.e., moves 100px from top and 80px from left of the parent position (here, container is the parent of all boxs).

FIXED POSITIONING

If the property is taken to be Fixed Positioning , then the element is effected by the property of left , right , top , and bottom . The element is fixed to put text,chat etc at any position on the left ,right ,top or bottom of the browser window, scrolling of window browser doesn't effect the position of the element.

SYNTAX

position:fixed;

Here, red box is fixed to the right of the window browser, scrolling of window browser doesn't effect the position of the element.

STICKY POSITIONING

If the property is taken to be Sticky Positioning , then the element is effected by the property of left , right , top , and bottom . This is used when you want to create the MENUor some important of any website that if the user scroll down the website then after the MENUwill not be effected. The element is positioned based on the user's scroll position.

SYNTAX

position:sticky;

Here, red box is the sticky element sticks to the top of the page , when you reach its scroll down.