In CSS, the position property specifies how an element is positioned in the document. There are five possible values for this property:

• static
• relative
• fixed
• absolute
• sticky

Static:

• HTML elements are positioned static by default.
• Top, right, bottom, and left properties have no effect when the element is static.

<style>
   .box {
     position: static;
   }
</style>
<div class="box">Static Box </div>

Relative:

• The element is positioned relative to its normal position in the document flow.
• You can use top, right, bottom, and left to offset it from that position.

<style>
   .box {
     position: relative;
     left:10px;
     top:10px;
   }
</style>
<div class="box">Relative Box </div>

Fixed:

• The element is positioned relative to the viewport.
• It stays fixed in place when the page is scrolled.
• Top, right, bottom, and left properties are used to define its position.

<style>
   .box {
   position: fixed;
   top: 10px;
   right: 10px;
   }
</style>
<div class="box">Fixed Box </div>

Absolute:

• The element is positioned relative to its nearest positioned ancestor any parent with a position other than static).
• Top, right, bottom, and left properties are used to precisely position it.

<style>
   .box {
   position: absolute;
   top: 10px;
   right: 10px;
   }
</style>
<div class="box">Absolute Box </div>

Sticky:

• The element toggles between relative and fixed, depending on the scroll position.
• It is treated as relative until it crosses a defined scroll threshold (e.g., top), after which it becomes fixed

<style>
   .box {
   position: sticky;
   top: 10px;
   right: 10px;
   }
</style>
<div class="box">Sticky Box </div>

Demo:

style.css

body{
        font-family: Arial, Helvetica, sans-serif;
    }
    .static-box {
    position: static;
    padding: 70px;
    }
    .relative-box {
    position: relative;
    top:10px;
    background-color: red;
    height: 300px;
    width: 300px;
    padding: 15px;
    margin-bottom: 50px;
    }    
    .absolute-box {
    position: absolute;
    top: 150px;
    right: 10px;
    background-color: yellow;
    padding: 15px;
    }
    .sticky-box {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    background-color: #45cf45;
    padding: 10px;
    width: 100px;
    height: 100px;
    }
    .fixed-box {
    position: fixed;
    top: 10px;
    right: 20px;
    padding: 10px;
    border: 1px solid red;
    }
    .row-content{
    display: flex;
    padding: 20px;
    gap: 10px;
    }
    .leftside{
    background-color: #ddd;
    width: 75%;
    padding: 20px;
    height: 1200px;
    }
    .rightside{
    width: 24%;
    padding: 20px;
    }

position.html

<div class="static-box">Static Box </div>
 <div class="row-content">
    <div class="leftside">
       <div class="relative-box">
          Relative Box
          <div class="absolute-box">Absolute Box </div>
       </div>
    </div>
    <div class="rightside sticky-box">Sticky</div>
 </div>
 <div class="fixed-box">Fixed Box </div>

Output: