×

Html & Html5

The World's best Software Development Study Portal

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.









CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute