I will show you CSS content position with difference between absolute and relative:
For example, we have below html file with position: absolute
<html>
<head>
<style>
img{
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
</head>
</style>
<body>
<h1> This is content1 <h1>
<img src="content2.gif" width="100" height="100" >
<p> This is content3 </p>
</body>
</html>
Position absolute means object will be located anywhere according to top, bottom, left, right position on the screen size and Not Relative to any object position such as <h1> This is content1 <h1> or <p> This is content3 </p>. It is located independently on it's own position on screen.
If there is no top, bottom, left, right position set up, it will be placed at original content2 start position, and content3 will ignore content2 position. It means content2 and content3 will be placed at same start original position.
If change position to relative,
img{
position: relative;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
img's position will be relative to nearest object position, here it would be content1. The img content will be located at top, bottom, left, right position which start to count after content1 <h1> This is content1 <h1> potion.
If there is no top, bottom, left, right position set up for position: relative; , we will see the same result as position: absolute; without any top, bottom, left, right position setup.
So without top, bottom, left, right position set up for position like below:
img{
position: relative;
}
or
img{
position: absolute;
}
img will be
placed at original content2 start position, and content3 will ignore
content2 position. It means content2 and content3 will be placed at same
start original position.
