Learn how to build and design websites with our tutorials.

CSS Positioning Tutorial

View Tutorial Contents


This tutorial will show you how to position HTML elements on a web page using CSS and also how to stack elements on top of and below each other. The CSS properties that allow you to do this are listed below.

The CSS positioning properties are the position property, the offset top, right, bottom and left properties, the float property and the z-index property. A brief description of each and their possible values are listed below.

CSS position Properties

The CSS position property and the four offset properties (top, right, bottom and left) work together. The position property must be set in order for the offset properties to have any effect.

The table below lists the position property, the offset properties, the z-index property and their possible values.

Property Description Value
position Sets the type of positioning of the element (or container) absolute, fixed, relative, static (default value), inherit
top Modifies position of relatively positioned elements from the top margin auto, length (px, em, etc.), %, inherit. Negative values are allowed
bottom Modifies position of relatively positioned elements from the bottom margin auto, length (px, em, etc.), %, inherit. Negative values are allowed
right Modifies position of relatively positioned elements from the right margin auto, length (px, em, etc.), %, inherit. Negative values are allowed
left Modifies position of relatively positioned elements from the left margin auto, length (px, em, etc.), %, inherit. Negative values are allowed
z-index Sets the stack order of positioned elements number, auto, inherit

CSS Static Positioning

By default, HTML elements are positioned statically. This means that they appear one after another in the web page.

HTML elements that are positioned statically are not affected by the top, bottom, right and left properties.

The elements within the HTML document example below are positioned statically.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
width:		150px;
height:		150px;
margin:		0;
padding:	0;
border:		1px solid #000;
}
.first{
background:	yellow;
}
.second{
background:	green;
}
.third{
background:	blue;
}

</style>

</head>
<body>

<div class="box first">
<p>
This is the first paragraph.
</p>
</div>

<div class="box second">
<p>
This is the second paragraph.
</p>
</div>

<div class="box third">
<p>
This is the third paragraph.
</p>
</div>

</body>
</html>

To see an example of how the example above code looks, Click Here.


CSS Fixed Positioning

HTML elements with a fixed position are removed from their normal flow within the web page and positioned relative to the viewport (web browser). HTML elements that have a fixed position can overlap other elements.

The code example below will output a web page that a box with a fixed position


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
position:		fixed;
width:		150px;
height:		150px;
top:			0;
left:			0;
margin:		0;
padding:		0;
color: 		#000;
border:		1px solid #000;
background:	white;
}

</style>

</head>
<body>

<div class="box">
<p>
This is element has a fixed position.
</p>
</div>

<h1>
This is a heading (1)
</h1>

<h1>
This is a heading (2)
</h1>

<h1>
This is a heading (3)
</h1>

<h1>
This is a heading (4)
</h1>

<h1>
This is a heading (5)
</h1>

...

</body>
</html>

Note: IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.

To see an example of how the example code above looks, Click Here.


CSS Relative Positioning

HTML elements that are relatively positioned are positioned within the normal flow of elements like statically positioned elements. The difference is that the offset properties (top, right, bottom and left) are used position the elements within that flow and the starting point is the element's original starting point.

The code below outputs a web page and the second heading has a relative position.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

h1{
margin:		10px 0;
padding:		0;
font-size:		2em;
font-weight:	normal;
color:		#000;
}
.relative{
position:		relative;
top:			25px;
left:			25px;
color:		red;
}

</style>

</head>
<body>

<h1>
This is a heading (1)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

<h1 class="relative">
This is a heading (2)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

<h1>
This is a heading (3)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

<h1>
This is a heading (4)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</body>
</html>

To see an example of how the example code above looks, Click Here.


CSS Absolute Positioning

Absolute positioning allows you to position HTML elements in a particular place within its parent element (the containing element). The containing HTML element can be the viewport (web browser) or another element.

HTML elements that have an absolute position can also overlap other elements.

To give an element an absolute position within another element that is not the viewport, the parent element of the element that you want to give an absolute position must have the position property with a value of relative set.

The code example below has an HTML element (the fourth heading down) with an absolute position and the viewport as the parent element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.absolute{
position:	absolute;
top:		25px;
left:		25px;
color:	red;
}

</style>

</head>
<body>

<h1>
This is a heading (1)
</h1>

<p>
This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph.
This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph.
</p>

<h1>
This is a heading (2)
</h1>

<p>
This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph.
This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph.
</p>

<h1>
This is a heading (3)
</h1>

<p>
This is the third paragraph. This is the third paragraph. This is the third paragraph. This is the third paragraph.
This is the third paragraph. This is the third paragraph. This is the third paragraph. This is the third paragraph.
</p>

<h class="absolute">
This is a heading (4)
</h1>

<p>
This is the fourth paragraph. This is the fourth paragraph. This is the fourth paragraph. This is the fourth paragraph.
This is the fourth paragraph. This is the fourth paragraph. This is the fourth paragraph. This is the fourth paragraph.
</p>

</body>
</html>

To see an example of how the example code above looks, Click Here.

The code example below has an HTML element with an absolute position within a <div> element which has an relative positioning.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
position:		relative;
height:		200px;
margin:		0 0 20px 0;
padding:		0;
border:		1px solid #000;
}
.absolute{
position:		absolute;
top:			50px;
left:			50px;
color:		red;
}

</style>

</head>
<body>

<div class="box">

<h1>
This is a heading (1)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

<div class="box">

<h1 class="absolute">
This is a heading (2)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

<div class="box">

<h1>
This is a heading (3)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

</body>
</html>

To see an example of how the example code above looks, Click Here.

The code example below has an HTML element with an absolute position overlapping the elements above.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
position:		relative;
height:		200px;
margin:		0 0 20px 0;
padding:		0;
border:		1px solid #000;
}
.absolute{
position:		absolute;
top:			-100px;
left:			0px;
color:		red;
}

</style>

</head>
<body>

<div class="box">

<h1>
This is a heading (1)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

<div class="box">

<h1 class="absolute">
This is a heading (2)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

<div class="box">

<h1>
This is a heading (3)
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

</body>
</html>

To see an example of how the example code above looks, Click Here.


Layering HTML Elements

The z-index property is used to control the layering of positioned HTML elements.

The z-index property with its possible values are listed again below.

Property Description Value
z-index Sets the stack order of positioned elements number (negative numbers are allowed), auto, inherit

The code example below will output four <div>s, each with a different z-index.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

div.box{
position:		absolute;
width:		100px;
height:		100px;
margin:		0;
padding:		0;
border:		1px solid #000;
}
div.one{
z-index:		-1;
top:			0;
left:			0;
background:	yellow;
}
div.two{
z-index:		0;
top:			50px;
left:			50px;
background:	green;
}
div.three{
z-index:		1;
top:			100px;
left:			100px;
background:	grey;
}
div.four{
z-index:		10;
top:			150px;
left:			150px;
background:	red;
}

</style>

</head>
<body>

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>

</body>
</html>

To see an example of how the example code above looks, Click Here.

The code example below will output four <div>s, each with a different z-index. It is the same as the example above, except that the <div>s have different z-index numbers.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

div.box{
position:		absolute;
width:		100px;
height:		100px;
margin:		0;
padding:		0;
border:		1px solid #000;
}
div.one{
z-index:		10;
top:			0;
left:			0;
background:	yellow;
}
div.two{
z-index:		1;
top:			50px;
left:			50px;
background:	green;
}
div.three{
z-index:		0;
top:			100px;
left:			100px;
background:	grey;
}
div.four{
z-index:		-1;
top:			150px;
left:			150px;
background:	red;
}

</style>

</head>
<body>

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>

</body>
</html>

To see an example of how the example code above looks, Click Here.