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.

Partners

CSS Positioning Tutorials

CSS position properties allow you to place HTML elements within a document exactly where you want them or relative to the web browser or relative to another HTML element.

CSS Relative Positioning

CSS relative positioning allows you to position 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.

The code above produces the headings below.

This heading has a relative position of left with a value of 0.

This heading is moved to the right of its usual static position.

This heading is moved to the left of its usual static position.

CSS Absolute Positioning

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.

The code above would display a web page that would look like the image below:

css xhtml positioning tutorial

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.

The code above would display a web page that would look like the image below:

css xhtml positioning tutorial

To web page that the code above produces is at:
CSS Static Positioning example

CSS Fixed Positioning

CSS fixed positioning allows you to place HTML elements in a fixed position on a web page, even if the page is scrolled up or down.

The CSS fixed position 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 code below will display a web page that uses the fixed position property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://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;
position: fixed;
}
div#eight
{
background-color: red;
top: 0;
left: 0;
}
div#nine
{
background-color: blue;
top: 0;
right: 0;
}
div#ten
{
background-color: green;
bottom: 0;
left: 0;
}
div#eleven
{
background-color: yellow;
bottom: 0;
right: 0;
}

</style>
</head>
<body>

<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<h1>this is some text this is some text this is some text</h1>
<div id="eight"></div>
<div id="nine"></div>
<div id="ten"></div>
<div id="eleven"></div>

</body>
</html>

The web page that the code above produces is:
CSS Fixed Positioning example

CSS Float Property

The float property is used to "float" the item to which it is applied to to one side of the content, causing the rest of the content to wrap around it.

The float property accepts 3 values: left, right and none.

The example below uses the float property with a value of left.

The code above outputs the image and text below.

css float property tutorial This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

The example below uses the float property with a value of right.