Fixed Positioning with CSS

See CSS: Tips and Tricks for similar articles.

Elements with fixed positioning stay in the same position in the browser window even when the page is scrolled. It can be used to keep an element (e.g., a navigation menu) on the page at all times. Learn how to use fixed positioning in the following steps.

Set the position property to fixed.


h1 {
	position:fixed;
}

Set one or more "offset" properties.
The "offset" properties are top, right, bottom, and left. Their values can be specified in number of units (e.g., 10px) or percentage of the containing block (e.g., 20%). With fixed positioning, the "offset" properties will offset the element relative to the browser window.


h1 {
	position:fixed;
	top: 70px;
	left: 50px;
}

The following example demonstrates fixed positioning:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#homeLink {
	position:fixed;
	top:20px;
	left:0px;
}

#homeLink img {
	border:none;
}

h1 {
	border:2px solid #006;
	padding:1px;
	background-color:#600;
	color:#eee;
}
#explanation {
	color:#006;
	line-height:1.5em;
	font-size:1.2em;
}
#wrapper {
	margin-left:45px;
	width:300px;
	background-color:#def;
	border:1px solid #006;
}
</style>
<title>CSS Fixed Positioning</title>
</head>
<body>
<div id="wrapper">
	<a href="index.html" id="homeLink"><img src="Images/littleHome.png" alt="Home"></a>
	<h1>CSS Fixed</h1>
	<h2>In Upper-Left Corner</h2>
	<div id="explanation">
		<p>The "home" icon on this page has fixed positioning.</p>
		<p>It will not move from it's place in the upper-left corner when the window is scrolled.</p>
	</div>
</div>
</body>
</html>

This code renders the following: Fixed Positioning

Fixed Positioning with CSS

Related Articles