CSS Position means where an HTML element should be placed. Positions are used to specify the location of an HTML element on a page layout.

Type of CSS positions

  • Static Position ( Default Position)
  • Relative Position
  • Absolute Position
  • Fixed Position

Static Position

Static position is the default position of all HTML elements. Static means position according to the HTML Order or position taken by an element by its own.

Note: CSS Properties top, left, bottom, right and z-index doesn't work with static position.

Div with static position.

Div with static position



<style>
.box{ 
	width:200px;
	height:200px; 
	background:#333;
	position:static;
}
</style>

	<div class="box">
		<p> Div with Static Position</p>
	</div>
				

Position Relative

Relative Position means position of an HTML element with respect to its actual position. Relative position can overlap content over another content.

Note: We can use top, left, bottom, right and z-index after giving position relative to an HTML element.

Move a div using position relative.

Create Position Relative


<style>
*{
	margin:0px;
	padding:0px;
}
.box1{
	width:200px; 
	height:200px; 
	background:#333; 
}
.box2{
	width:200px; 
	height:200px; 
	background:#999; 
	position:relative; 
	left:200px;
}
</style>
	
	<div class="box1">Div with position static.</div>
	<div class="box2">Div with relative position and left 200px;</div>
	
						

Position Relative on Browser

Div with static position



Div with relative position and left 200px;


Position Absolute

Absolute Position means position of an HTML element in a specific location outside of normal document flow. Position Absolute remove the element from normal flow and shows all of its own. An element with position absolute can be placed anywhere on the page using properties top, left, right and bottom. Absolute Element can also overlap other elements by using z-index property.

Note: We can use top, left, bottom, right and z-index after giving position absolute to an HTML element.

Move a div using position absolute.

Using Position Absolute


<style>
*{
	margin:0px;
	padding:0px;
}
.box1{
	width:200px; 
	height:200px; 
	background:#333; 
}
.box2{
	width:200px; 
	height:50px; 
	background:#999; 
	position:absolute; 
}
</style>
	
	<div class="box1">Div with position static.</div>
	<div class="box2">Div with relative absolute;</div>
	
						

Position Absolute on Browser

Div with static position



Div with Absolute position, See its no longer occupying space on same axis. It flows out.


Position Fixed

Fixed Position means position of an HTML element with respect to device window. It doesn't move even if we scroll window down.
For Exp: the Top Menu of this web-page is positioned fixed to the top. It doesn't move even after scrolling down or up.

Note: We can use top, left, bottom, right and z-index after giving position fixed to an HTML element.

Click on the box below to make it fixed

Div with position fixed, left 200px; and top 300px;


CSS Z-Index

CSS Z-Index is used to place an element above another element. Its value is numeric.

Note: z-index can work only if the position of the element is relative, absolute, or fixed. It Doesn't work on position static.

div using position relative and z-index.


<style>
*{
	margin:0px;
	padding:0px;
}
.box1{
	width:200px; 
	height:200px; 
	background:#333;
	position:relative;
	z-index:1;	
}
.box2{
	width:200px; 
	height:200px; 
	background:#999; 
	position:relative;
	z-index:2; 
}
.box3{
	width:200px; 
	height:200px; 
	background:#ccc; 
	position:relative;
	z-index:3;
}
</style>
	
	<div class="box1">Div with position relative and z-index 1.</div>
	<div class="box2">Div with position relative and z-index 2;</div>
	<div class="box2">Div with position relative and z-index 3;</div>
	
						

Div with various z-index on browser

Div with z-index 1

Div 1

Div with z-index 2

Div 2

Div with z-index 3

Div 3



As z-index of last div ( div-3) is greater than other two, it is on the top.