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 Relative Positioning Tutorial
CSS relative positioning allows you to position (X)HTML elements relative to it would statically have been positioned. Think of it as changing the position from where it originally would have been if relative positioning had not been applied.
If you specify position: relative, you can use top or bottom, and left or right to move the element relative to where it would normally be placed in the page.
The top property defines how far from the top of its usual static position you want the top of our element to appear. A positive value moves the container down from its usual static position. A negative value moves the element up from its usual static position.
The left property defines how far from its usual static position you want the left of our element to appear. A positive value will move the element to the right. A negative value will move the container to the left.
The right property defines how far from its usual static position you want the left side to appear, not the right side.
The bottom property defines how far from its usual static position you want the top of the container to appear.
<!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">
h3.one
{
position: relative;
left: 0;
border: 1px solid #000;
margin: 10px 0;
}
h3.two
{
position: relative;
left: 40px;
border: 1px solid #000;
margin: 10px 0;
}
h3.three
{
position: relative;
left: -40px
border: 1px solid #000;
margin: 10px 0;
}
</style>
</head>
<body>
<h3 class="one">
This heading has a relative position of left with a value of 0.
</h3>
<h3 class="two">
This heading is moved to the right of its usual static position.
</h3>
<h3 class="three">
This heading is moved to the left of its usual static position.
</h3>
</body>
</html>
The code above produces the headings below.