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. By default, all elements in html are positioned staticly, means according to page flow. But using css positions, they can be moved from their position relatively or absolutely.

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.

Element 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 over another elements, relative to its position. Relative elements moves, but their space remains. By default, relative elements are above static elements on z axis. But of two or more elements are relative and we move them, the last relative element will come on the top(z axis)

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

Position Relative Example


<style>

    .box1{
	   width:200px; 
	   height:200px; 
	   background:#333; 
       }
    .box2{
	   width:200px; 
	   height:200px; 
	   background:#999; 
	   position:relative; 
	   left:100px;
       bottom:50px
       }
</style>
	
	<div class="box1">Div with position static.</div>
	<div class="box2">Div with relative position, left 200px and bottom 50px</div>
	
						

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.

Properties of Position Absolute

  1. Leave space in normal flow.
  2. Occupy width of content.
  3. Can move relative to its non static parent.
  4. width 100% of absolute element is actually 100% of its non static parent element.
  5. If all parent elements are static, absolute element moves relative to body.

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

Position Absolute Example


<style>
    .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 normal flow. They are out of flow.



Position Fixed

Fixed Position means position of an HTML element with respect to device window. It doesn't move even if we scroll window up or 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 from window;


CSS Z-Index

CSS Z-Index is used to place an non static element above another element. Value of z-index is a number.

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>
.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>
	
						

z-index example

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.