CSS Defference between all Position Property

<!DOCTYPE html>
<html>
<head>
<style>
#head1 {
position: static;
border: 2px solid blue;
width: 300px;
height: 100px;
background-color: #9ff29d;
}

#sub1 {
position: absolute;
border: 2px solid red;
top: 70px;
right: 15px;
background-color: #7c9aeb;
}

#head2 {
position: relative;
border: 2px solid blue;
width: 300px;
height: 100px;
background-color: #dfa1f7;
}

#sub2 {
position: absolute;
border: 2px solid red;
top: 70px;
right: 15px;
background-color: #9ec6f0;
}

#head3 {
position: absolute;
border: 2px solid blue;
width: 300px;
height: 100px;
top: 750px;
right: 15px;
background-color: #cc4774;
}

#sub3 {
position: absolute;
border: 2px solid red;
top: 70px;
right: 15px;
background-color: #695d61;
}

#head4 {
position: fixed;
border: 2px solid blue;
background-color: rgba(255,200,200,0.5);
width: 300px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
background-color: #506e40;
}

#sub4 {
position: absolute;
border: 2px solid green;
top: 70px;
right: 15px;
background-color: white;
}
</style>
</head>
<body>

<h1>The position property:</h1>
<p>Complete defference between each position property like static, relative, absolute, fixed.</p>

<div id="head1"><h4>Use of static position property.</h4>
Hello is am head1 and my position property is static.
<div id="sub1">Hello is am sub1 and my position: absolute, right: 18px, top: 80px</div>
</div>

<div id="head2"><h4>Use of relative position property.</h4>
Hello is am head2 and my position property is relative.
<div id="sub2">Hello is am sub2 and my position: absolute, right: 18px, top: 80px</div>
</div>

<div id="head3"><h4>Use of absolute position property.</h4>
Hello is am head3 and my position property is absolute and top: 750px, right: 15px.
<div id="sub3">Hello is am sub3 and my position: absolute, right: 18px, top: 80px</div>
</div>

<div id="head4"><h4>Use of fixed position property.</h4>
Hello is am head4 and my position property is fixed, bottom: 0, left: 0, right: 0.
<div id="sub4">Hello is am sub4 and my position: absolute, right: 18px, top: 80px</div>
</div>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>
<p>Here is some text ...................</p>

</body>
</html>