TABLE OF CONTENTS

CSS POSITIONING

• STATIC
• RELATIVE
• ABSOLUTE
• FIXED
• STICKY

With the help of CSS Positioning many things could be managed we could do so by the help of some Properties in CSS Positioning and make our webpage more attractive.

POSITION-->STATIC

Every element in html has static position by default so for that the element will stick with normal flow of the web page.

Here 3 boxes are created with the help of HTML and CSS and the position of box2 is changed but there is no effect just because as earlier said by default the position is static so no change could be visible.

POSITION-->RELATIVE

In the case of relative the elements will not stick with the normal flow of the page so if there isa property change then changes will be visible. So here the position of box2 is set to relative so lets look at the change.

Here the property of box2 is changed it is set to relative, from top:20px;. So the changes are visible.

POSITION-->ABSOLUTE

In case of Position absolute it is almost similar to the position static but here we can play around with the top left right bottom. Element with position: absolute is completely removed from the original document flow. We can position this element anywhere relative to its closest parent. When an absolute positioned element has no positioned parent element, it uses the document body.

So the box2 moves from the original position. Here the position absolute is applied to box2 from bottom:40px; So the box moves towards bottom at 40px and from right it moves towards 20px.

POSITION-->FIXED

In the case of fixed the element is completely removed from the document flow. When the position fixed is applied the element is positioned relative to the document body and not to the parent element. When position fixed is applied it is not going to be affected by the scrolling affect.

So here is this case of position fixed the property is applied to box2. From top it is 100px so it is fixed from the top at position of 100px and from left it is 230px so the box is fixed at a position of 230px from left, and we can see there is no scrolling effect on position of box2.We visited many websites where the chat box is fixed so here we see exactly like that.

POSITION-->STICKY

In this case the element is completely sticked according to its respective property. So here the box2 is sticked to the top even if we scroll down.

So here sticky property is applied to the box2.The box2 is sticked to the top at 1px even if we scroll the box is sticked at the top. When we visit many websites the navbar is fixed at the top.

So here are the CSS positions as earlier mentioned in the starting of the article.