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.
Browse our HTML, XHTML and CSS tutorials to learn how to create your website at LearnWebsiteDesign.com or download one of our free website templates.
Partners
Providing high quality free software to download
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