CSS Positions

CSS Position Property

The CSS position property specifies how an element is positioned in the document. By default, elements are positioned statically (except the dialog element). Static elements follow normal document flow. Other position values let you move elements relative to their normal position or place them at a specific location on the page (for example, using relative, absolute, fixed or sticky).

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 positioning the top, bottom, left, right and z-index properties have no effect.

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

Absolute positioning removes the element from the normal document flow and positions it independently. An absolutely positioned element can be placed anywhere using the top, right, bottom, and left properties. It can overlap other elements — use z-index to control stacking order.

Offsets for an absolutely positioned element are calculated relative to the nearest positioned (non-static) ancestor, or transformed element. If no such ancestor exists, offsets are relative to the initial containing block (typically the 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 (introduced in modern CSS) behaves like relative until the element reaches a threshold within the viewport, at which point it behaves like fixed and 'sticks' in place. That's why it's called "sticky."

It's necessary to specify at least one offset (top, right, bottom or left) for a sticky element to take effect; 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

z-index controls the stacking order of positioned (non-static) elements. It accepts integer values—elements with higher z-index appear above elements with lower values.

Example: div elements using relative positioning 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