CSS Position Property

CSS Position means where an element should be located. Positions are used to specify the location of an HTML element on a page layout. By default, all elements in html are positioned statically, means according to page flow. But using css positions, they can be moved from their position relatively or absolutely.

Type of CSS positions

Position Properties

Applicable to non-static positions only

Property Units Role
Left px, % To move element from left
Right px, % To move element from right
Top px, % To move element from top
bottom px, % To move element from bottom
z-index number To change z axis of element

Click to Change position


CSS Positions example

Static

This is an example to demonstrate css positions. Click buttons on top to change css position of gray div. Scroll in division to check css positions in action,


Static Position

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

In static position, there will be no impact when using top, bottom, left, rigth and z-index properties.

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>
				

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


Position Relative

Relative Position means position of an HTML element with respect to its actual position. Relative position can overlap over another elements. 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)

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, left 200px and bottom 50px


Position Absolute

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

The left, top, bottom and right of absolute element is calculated by nearest non-static parent.

Properties of Position Absolute

  1. Leave space in normal document flow.
  2. Occupy width of content.
  3. Can move relative to its nearest non static parent.
  4. width 100% and height 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 viewport window.

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

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.