CSS Position
If we want to position the elements through left, right, bottom and top properties than we must have to set the Position
property first. Let's talk about it:-
position property
This property specifies that for a particular element which type of positioning property is applying.
And on the basis of these properties only we can able to positionate the items through left,right,top and bottom.
Mainly there are 5 types of position property which are as follows :-
- static
- fixed
- relative
- absolute
- sticky
Let's talk about them one by one :-
static
By default the position property for HTML elements remains static and in this position propery we can't set
the top,left,bottom and right properties. And here an element always positioned according to normal flow of the page.
Let's understand this by the following program:-
<!DOCTYPE html>
<html>
<head>
<style>
.main {
position:static;
border:4px solid blue;
left:30px
}
</style>
</head>
<body>
< div class="main">
<p>I am Manish Singh Bhakuni </p>
</div>
</body>
</html>
Output of the Program
I am Manish Singh Bhakuni
We see nothing changes here because this static property never changes the left,right,top and bottom properties.
fixed
By this property we can fix our element at a same or definite place in the viewport or in our webpage, no
matter whether page scrolls to top, left, right and bottom, it will remain in a fixed place. And the top , left , right and
bottom property will be decided on the basis of the whole viewport.
Let's understand this by the following program:-
<!DOCTYPE html>
<html>
<head>
<style>
.main {
position:fixed;
border:4px solid blue;
top:30px
}
</style>
</head>
<body>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
<p> My name is Manish Singh Bhakuni </p>
< div class="main">
<h5>I am Manish Singh Bhakuni </h5>
</div>
</body>
</html>
Output of the Program
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
My name is Manish Singh Bhakuni
I am Manish Singh Bhakuni
You can see in the bottom right of the webpage, text will be coming "I am Manish Singh Bhakuni" with a blue border
and it is been in a fix position.
relative
By this property we can set our elements at top, left, right and bottom from it's original position where
the element exactly is.
Let's understand this by the following program:-
<!DOCTYPE html>
<html>
<head>
<style>
.main {
position:relative;
border:4px solid blue;
left:30px
}
</style>
</head>
<body>
<h5>See it's adjusting the properties from its original place.</h5>
< div class="main">
<h5>I am Manish Singh Bhakuni </h5>
</div>
</body>
</html>
Output of the Program
See it's adjusting the properties from its original place.
I am Manish Singh Bhakuni
We can see that it is considering the space not from the viewpage but from it's exact position.