Fixed Positioning with CSS
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 tofixed
. - Set one or more "offset" properties.
The "offset" properties are
top
,right
,bottom
, andleft
. 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. - The following example demonstrates fixed positioning:
This code renders the following:<!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>
h1 {
position:fixed;
}
h1 {
position:fixed;
top: 70px;
left: 50px;
}