position:fixed
By Stephen Bucaro
Default Behavior
When a user srolls the browser window, the contents of the window move in the oposite direction
of the scroll bar. Shown below is the code for a webpage containing six div elements and how
they would be positioned after the user scrolled the browser window.
<html>
<head>
<style type="text/css">
.myBox
{
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div class="myBox">Element 1</div>
<div class="myBox">Element 2</div>
<div class="myBox">Element 3</div>
<div class="myBox">Element 4</div>
<div class="myBox">Element 5</div>
<div class="myBox">Element 6</div>
</body>
</html>
![Scrolled Browser Window Scrolled Browser Window](images/position5.png)
Fixed Positioning
When you specify an element's position:fixed, you take the element out of the normal
flow, and cause it to remain fixed in positioned when the browser window is scrolled. Shown
below is the code for a webpage containing six div elements, with one of the div elements
position:fixed specified, and how they would be positioned after the user scrolled the browser window.
<html>
<head>
<style type="text/css">
.myBox
{
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
height:100px;
width:100px;
}
.fixedBox
{
background-color:lightskyblue;
border-style:solid;
border-width:1px;
padding:4px;
height:100px;
width:100px;
position:fixed;
}
</style>
</head>
<body>
<div class="myBox">Element 1</div>
<div class="fixedBox">Element 2</div>
<div class="myBox">Element 3</div>
<div class="myBox">Element 4</div>
<div class="myBox">Element 5</div>
<div class="myBox">Element 6</div>
</body>
</html>
![Element 2's position fixed Element 2's position fixed](images/position6.png)
You can use the left and ⁄ or top property to place the element exactly
where you want in the browser window, and it will remain at that position regardless of scrolling.
• Note: IE6 and lower do not support fixed positioning, IE7 with "Strict" DOCTYPE does support fixed positioning.
More CSS Quick Reference: • Set the Text Alignment • Set the Font Boldness • Indent the First Line of Text • Set an Element's Overlap (z-index) • Set the Border Properties • Style the First Letter • Set a Fixed Background Image • Set the box-sizing Property • Use Image for List Item Bullets • Set the Letter Spacing
|