CSS positioning

hello friends today we are going to learn about CSS positioning.

CSS positioning is used to position the elements of a web page as per the decision of the creator of the web page. The elements are positioned via the property of position. There are five different values of position they are:

1. Static: All elements of the web page are static by default. They are rendered in the browser as per the normal flow of the page any properties such as top, bottom, right, left if applied will not have any effect with elements with position sticky.

2. Fixed: All elements with the position with the value of fixed is positioned with relative to the viewport(screen). This means the that element stays in the same place even when the screen is scrolled. Let us see the position with fixed value:

code:
`.box{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px;
}

#box-3{
background-color: red;
position: fixed;
bottom: 20px;
right: 20px;
}
`

result:

as seen in the result box-3 is at the bottom of the page irrespective of the amount of scrolling done by the user.

3. Relative: All elements with the position with the value of relative is positioned based on the relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Let us see the position with relative value:

code:

`.box{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px;
}

#box-3{
background-color: red;
position: sticky;
top: 20px;
left:120px
}
`
result:

4. Absolute: All elements with the position with the value of absolute is positioned based relative to it's parent.

Absolute positioned elements are removed from the normal flow, and can overlap elements.

let us see from the example:
code:
`
.box{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px;
}

box-3{

   background-color: red;
   position: absolute;
   top: 20px;
   left:120px;
 }`

result:

. sticky : All elements with the position with the value of sticky is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).

You must also specify at least one of top, right, bottom or left for sticky positioning to work.

let us see the working of sticky with an example:

code:
`.box{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px;
}

#box-3{
background-color: red;
position: sticky;
top: 20px;
left:120px
}
`

result: