programplug Logo




CSS Position

The CSS position defines how to set the position of HTML elements on a page and it is used to set the text,image position to dispaly in a web page.
CSS position property is specified with the type of position method which have diferrent poation values:

1 CSS Static Position
2 CSS Fixed Position
3 CSS Relative Position
4 CSS Absolute Position

How to set the postion:
Syntax:

	 p
	 {
         position:static;
         right:30px;
         bottom:40px;
         }
		 

1) CSS Static Position
A Static postion is always positioned according to the normal flow of the page. The CSS static postion is by default position for HTML elements and it is not affected by top,bottom,left and right of properties.
Example-

  <html> 
    <head>  
    <style>  
p.pos_static
  {
    position: static;
    top: 60px;  
    right: 80px;  
    color: red;  
 }  
    </style>  
    </head>   
   <body>  
   <p class="pos_static"> My first html with CSS. </p>
  <p>My first html with CSS. </p>

 </body> 
 </html> 
 
Output:
My first html with CSS
My first html with CSS.

2 CSS Fixed Position
This property are used to set the fixed position and even you scroll down the page the position will remain on same.

  <!DOCTYPE html> 
  <html> 
    <head>  
    <style>  
p.pos_fixed {  
    position: fixed;  
    top: 40px;  
    right: 10px;  
    color: green;  
}  
 </style>  
 </head>   
   <body>  
   <p class="pos_fixed"> My first html with CSS. </p>
   <p>My first html with CSS. </p>

   </body> 
 </html> 

Output:
My first html with CSS.

3 CSS Relative Position
This property helps to set the actual relative element to its normal postion.

Example:
  <html> 
    <head>  
    <style>  
p.pos_static {
    position: relative;
    top: 40px;  
    right: 50px;  
    color: red;  
}  
 </style>  
 </head>   
 <body>  
<p class="pos_relative"> My first html with CSS. </p>
 <p>My first html with CSS. </p>

 </body> 
 </html> 
output:
My first html with CSS

My first html with CSS.

4 CSS Absolute Position
The absolute property specified the postion first tpo its parent element that have a postion other than a static and it is cordeinates relative to your screen top-left corner.

Here is an example -
  <html> 
    <head>  
  </head>  
     <body>  
     <div style="position:absolute; righ:80px; bottom:40px; background-color:green;"> 
      The absolute CSS positioning.
      </div> 
 </body>  
 </html> 
Output:
My first html with CSS







Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy