When a user srolls the browser window, the contents of the window move in the oposite direction of the scroll bar. The style rule position can be used to override this default behavior. When you specify an element's "position:fixed" it won't move when the user scrolls the window.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

position:fixed

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

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

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268