position Property:-

The position property define the many types of positioning method using for the element like (static, relative, fixed, absolute or sticky).
some method of position method:-
The position property define some type of positioning method using for an elements.

static

relative

fixed

absolute

sticky

Elements positioned using the top, bottom, left, and right properties in html page.

position: static in css:-

static position is by default set in HTML element.
Static elements are do not affected by the top, bottom, left, and right properties in HTML

<style>
div.static {
  position: static;
  border: 3px solid blue;
}
</style>


<h2>position: static in code family</h2>

<p>we are code family</p>

<div class="static">
 code family
</div>

position: relative:-

position: relative; is relative to its normal position of element. Setting the top, right, bottom, and left properties of the element.

<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: code family</h2>

<p>code family</p>

<div class="relative">
code family
</div>

position: fixed:-

An element with position: fixed;
A fixed element does not leave a any gap in the HTML page where it would normally have been located

<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>


<h2>position: fixed; </h2>

<p>Code family</p>

<div class="fixed">
Code family;
</div>

position: absolute:-

the element with position: absolute; is positioning is relative to the nearest positioned element.

<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid blue;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid red;
}
</style>

<h2>position: absolute; Code family</h2>

<p>Code family</p>

<div class="relative">Code family
  <div class="absolute">Code family</div>
</div>

position: sticky:-

the element with position: sticky is positioning based on the user's scroll position.

<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: blue;
  border: 2px solid red;
  color:white;
}
</style>


<p>code family  <b>scroll</b> we are code family</p>
<p>we are code family</p>

<div class="sticky">Code family</div>

<div style="padding-bottom:2000px">
  <p>we are code family</p>
</div>