Position : - This property Specifies the type of Positioning method used for an Element. confusing terms I know. lets Simplyfy it Position Property is a property which we used when we have to position something ( image svg etc) or some tag on page with the freedom of direction such as left right top bottom ( You have seen such a thing a Message or quarry box which float over the window). but There are different type of propety available for Position which are as follow.
Static
Relative
fixed
absolute
sticky
1.Static :- Static position or default position is a property which is given to every element by default these are not Affected by the top, bottom, left, and right Properties. When we create a Element on html that element by default have the property of Static, It is always positioned according to the normal flow of the page.
[https://www.w3schools.com/css/tryit.asp?filename=trycss_position_static](Link)
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
it have nothing special about it , It is just normal position
2.Relative :- Relative position is not Like Static position, In this property Element can be positioned at top, right, bottom and left. But what is so special about it, The property it provides to the element is very unique It's gives element, freedom of move around but it also take considertion of the normal position also, mean It does not go flying out of the parent. It has a normal position which is different from it's asigned position
[https://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative](Link)
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
3.Fixed :- Fixed position is very to understand. An Element with position Fixed is positioned relateive to the viewport. which means it always stays in the same place even if the page is scrolled It just stay there like a Message/Quarry box etc. its float over a position which we assign with bottom right top and left
[https://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed](Link)
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
4.Absolute :- Absolute Position is a position which reative to its First Positioned (not static ) ancestor element. What actually happens is The Element is removed from the noraml document flow and no Space is created for the elemnt in the page layout. It is positioned relative to its closest positioned Ancestor
https://developer.mozilla.org/en-US/docs/Web/CSS/position Its final position is determind by the values such as top right and left.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 500px;
height: 250px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 100px;
right: 0;
width: 300px;
height: 150px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<div class="relative-block">This div element has position relative;
<div class="absolute-block">This div element has position absolute;</div>
</div>
</body>
</html>
5.Sticky :- Position Sticky is positioned based on the User's scroll, This Position behave like Relative and Fixed, depending on sthe scroll position . It is positioned Relative unitl a given offset position is met in the viewport, then It sticks in the place (like Position : Fixed)
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
</div>
</body>
</html>