CSS Position Property

In this chapter you will learn:
About position property
Values of this property
Examples of position property

Position property is used to specify that which type of positioning method is used for the element or tag. It helps to create a web page with the best look and feels.


Syntax:
position:value;
Values of position property
Values Description
fixed Used to specify fixed positioning of element
static It is the default value which positioning element in a normal form
absolute Used to specify absolute position of the element
relative Specifies the element relative to its normal position
initial Specifies the default value
inherit Used to inherit property from parent element

Examples of position property

Example 1.
position:absolute;

<html>
<head>
    <title>Example of position property</title>
    <style type="text/css">
        #a
        {       
            position:absolute;
            left:50px;
            right:200px;
           
      }
    </style>
    </head>
<body>
<div> This is the example of position property of css.</div>
<div id="a">This is the example of position property of css.</div>
</body>
</html>
Guide:-

In the given program there is two type of divisions have used, one in a normal position but second as absolute position so both have a different position.


Output:-
example of position-absolute property
Example 2.
position:static;

<html>
<head>
    <title>Example of position property</title>
    <style type="text/css">
        #a
       {       
            position:static;
            left:50px;
            right:200px;
           
      }
    </style>
    </head>
<body>
<div> This is the example of position property of css.</div>
<div id="a"> This is the example of position property of css.</div>
</body>
</html>
Guide:-

When you will run the given program, you will get that the position of both divisions is in a normal form. It has done due to a static value.


Output:-
example of position-static property
SUMMARY

In this chapter, you have learned about position property with two examples so now try to use this property for yourself. Some other properties are given in next chapter so click on Next button to continue-

More Articles

 

Share your thought