CSS Positions

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 ( except dialog tag ). static position is position on an element to page or document flow. By using css positions, they can be moved from their position relatively or absolutely.

Type of CSS positions

• Static
• Relative
• Absolute
• Fixed
• Sticky

Position Properties

These 6 position properties are applicable to non static positions only. Except position static, any position can use them.

Click to Change position

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.

<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 elements moves, but their space remains.

By default, relative elements are above static elements on z axis. But when two or more elements are relative, the last relative element in stack will come to the top(z axis).

Position Relative Example

<style>
.box1{
	width:200px; 
	height:200px; 
	background:#333; 
	padding:10px;
    }
.box2{
    width:200px; 
    height:200px; 
    background:#999; 
    padding:10px;
    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>
	
						

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 document 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 with respect to nearest non-static parent or viewport.

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.

Position Absolute Example

<style>
.box1{
	width:200px; 
	height:200px; 
	background:#333; 
}
.box2{
	height:50px;
	background:#999; 
	position:static; 
}
</style>
	
<div class="box1">Position static</div>
<div class="box2">Position absolute</div>

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.

Sticky

Position Sticky was introduces in CSS3. Sticky element normally behave like relative positioned, but once reaching the corner or viewport, it sticks. That;s why its called Sticky.

Its compulsory to use either top, bottom, left or right to sticky element. Otherwise it will not stick.

<style>
.box{ margin: 1rem 0 }	
.box h3{ position: sticky; top:0; background:#fff }	
.box p{ margin-top: 1rem}
</style>

<div class="box">
<h3>Heading </h3>
	<ol>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ol>
</div>

<div class="box">
<h3>Heading </h3>
	<ol>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ol>
</div>

CSS Z-Index

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

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