Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
CSS Absolute Positioning Tutorial
By default, HTML elements are positioned statically, one after another just they appear in the document.
The CSS absolute positioning property allows you to position HTML elements in a specific place in a web page using the top, right, bottom and/or left properties using either positive or negative CSS length units such as px, em, and cm or percentage values.
The length units or percentage values define how far from the top, right, bottom and/or left of the container you want the HTML element to be placed.
The HTML elements in the code below will be displayed statically, since no positioning is applied.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
body { background-color: silver; }
div
{
width: 100px;
height: 100px;
border: 1px solid #000;
}
div#one
{ background-color: red; }
div#two
{ background-color: blue; }
div#three
{ background-color: green; }
div#four
{ background-color: yellow; }
</style>
</head>
<body>
<h1>
This is some text this is some text this is some.
</h1>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</body>
</html>
The code above would display a web page that would look like the image below:
The web page that the code above produces is: CSS Static Positioning example
The code below is the same as the code example above, except with absolute positioning applied to it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
body { background-color: silver; }
div
{
width: 100px;
height: 100px;
border: 1px solid #000;
}
div#one
{
background-color: red;
position: absolute;
top: 0;
left: 0;
}
div#two
{
background-color: blue;
position: absolute;
top: 0;
right: 0;
}
div#three
{
background-color: green;
position: absolute;
bottom: 0;
left: 0;
}
div#four
{
background-color: yellow;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<h1>
This is some text this is some text this is some.
</h1>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</body>
</html>
The code above would display a web page that would look like the image below:
To web page that the code above produces is at:
CSS Static Positioning example