Position Relative:
An element with the position relative property will move from its default position if its top, right, bottom, and left attributes are changed. The gap won’t be filled by the other objects or components.
<!DOCTYPE html>
<html>
<head>
<style>
.relative{
position: relative;
background-color: #006100;
}
</style>
</head>
<body>
<h2>Position Relative</h2>
<div class="blocks">
<div class="relative">This is paragraph for Position Relative.</div>
</div>
</body>
</html>
Position Absolute:
An element will move about its parent element if its position property is absolute. The document body is used as the parent if no parent is available.
<!DOCTYPE html>
<html>
<head>
<style>
.relative{
position: relative;
background-color: #006100;
width:200px;
height:200px;
}
.absolute{
position: absolute;
top:50px;
left:10px;
background-color: #cae8ac;
width:100px;
height:80px;
}
</style>
</head>
<body>
<h2>Position Absolute</h2>
<div class="blocks">
<div class="relative">This is paragraph for Position Relative.
<div class="absolute">This is paragraph for Position Absolute.</div>
</div>
</div>
</body>
</html>
Position Fixed:
An element with a fixed position is positioned in relation to the viewport, or the browser window. A fixed-positioned element will remain in place when the page is scrolled since the viewport doesn’t move when the window is scrolled.
<!DOCTYPE html>
<html>
<head>
<style>
.relative{
position: relative;
background-color: #006100;
width:200px;
height:auto;
}
.fixed {
position: fixed;
top: 0px;
left: 0px;
width:100px;
height:50px;
background-color: #cae8ac;
}
</style>
</head>
<body>
<div class="blocks">
<div class="relative">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec nunc non eros malesuada pulvinar. Phasellus a efficitur sem. Cras lorem odio, pretium eget diam ac, pulvinar interdum felis. Ut commodo mi purus. Morbi rutrum felis felis, eu ornare nisl mattis sed. Vivamus erat arcu, blandit vel odio a, auctor sollicitudin velit. Aliquam venenatis, risus in molestie gravida, arcu orci volutpat turpis, a imperdiet sapien massa sit amet odio. Donec neque justo, pretium eget risus a, finibus auctor ex. Donec vel finibus enim. Ut consequat, lorem sed viverra ultrices, sapien augue finibus tortor, a efficitur enim sapien luctus ex. In varius varius nisl ac mollis.
</div>
<div class="fixed">
This is paragraph for Position Fixed.
</div>
</div>
</body>
</html>
