• Register
28,501 points
12 7 5

 In CSS, there is a position property for all the elements that specifies where an element should appear in the browser. If you do not specify it, the browser sets it automatically but our webpage does not look so good. In this article, we are going to see how the position property works, what are its possible values, and the difference between the two most widely used values i.e. absolute and relative. 

Position Property:

The position property defines the position of an element on the webpage. The syntax of using this property is as follows:

position: value;

The position property can have the following values:

  • absolute: This value places the element to the exact position which is specified by the developer
  • relative: This value places the element relative to the position of its parent element.
  • static: This value places the elements in order. This is the default value.
  • fixed: This value sets the element relative to the browser window.
  • sticky: This value sets the element according to the user scroll position.

The most commonly used values for this property are absolute and relative positions. Let’s see what is the difference between these values:

Difference between Absolute and Relative Positions:

  • The relative position causes the element to adjust from its normal position. The surrounding elements do not fill the gap when we use this positioning. If you do not set top, bottom, left, or right properties, this value will not have any effect. The syntax for using this value is as follows:
    position: relative;

    Example:
     

    <!DOCTYPE HTML>
    <html>
    
    <head>
    
    	<title>The relative positioning</title>
    	<style>
    			.div1{
    				background-color: pink;
    				border: 2px solid;
    				height: 40px;
    				width: 30%;
    			}
    			.relative{
    				position: relative;
    				top: 20px;
    				border: 1px solid red;
    				background-color: powderblue;
    			}
    	</style>
    
    </head>
    
    <body>
    	<div class="div1">
    	</div>
    	<div class = "relative">
    		This is the relative div
    	</div>
    </body>
    </html>
    Output:
    Relative positioning
  • The absolute positioning adjusts the position of an element relative to its parent element. If there is no parent element, it uses document as its parent. The syntax for using this value is as follows:
    position: absolute;

    Example:
     

    <!DOCTYPE HTML>
    <html>
    
    <head>
    
    	<title>The relative positioning</title>
    	<style>
    			.div1{
    				background-color: pink;
    				border: 2px solid;
    				height: 40px;
    				width: 30%;
    			}
    			.relative{
    				position: absolute;
    				top: 20px;
    				border: 1px solid red;
    				background-color: powderblue;
    			}
    	</style>
    
    </head>
    
    <body>
    	<div class="div1">
    	</div>
    	<div class = "relative">
    		This is the absolute div
    	</div>
    </body>
    </html>

    Output:
    Absolute Positioning