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 Fixed Tutorial

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" "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;
position: fixed;
}
div#one
{
background-color: red;
top: 0;
left: 0;
}
div#two
{
background-color: blue;
top: 0;
right: 0;
}
div#three
{
background-color: green;
bottom: 0;
left: 0;
}
div#four
{
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="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

</body>
</html>

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