1. Home
  2. How-to Articles
  3. Fixed Positioning with CSS

Fixed Positioning with CSS

  • google plus

In Brief...

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.

Take our Advanced CSS Training course for free.

See the Course Outline and Register

Instructions

  1. Set the position property to fixed. 
    2. 
h1 {
	position:fixed;
}
  2. 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.

    3. 
h1 {
	position:fixed;
	top: 70px;
	left: 50px;
}
  3. 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

Need CSS Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss