Export (0) Print
Expand All

Fixed positioning

When the position of an element is fixed, its location in the page is not calculated relative to parent or child elements, but to the browser window. Fixed-position elements flow within the given dimensions of the browser window, instead of flowing within a location in the body of a page (as with absolute positioning).

Setting fixed positioning

The following example includes a typical layout representing fixed attributes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
 <html><head><title>Fixed Positioning Example</title><style type="text/css">
    body{height=640px; width=480px;}
      #logoBar  {position: fixed; width: 99.15%; height: 15%; top:0; right: 0; bottom: auto; left: 0; border :solid;}
      #leftSide {position: fixed; width: 10em; height: auto; top:15%; right: auto; bottom: 50px; left: 0; border :solid;}
      #main     {position: fixed; width: auto; height: auto; top:15%; right: 0; bottom: 50px; left: 10em; border :solid;}
      #footer   {position: fixed; width: 99.15%; height: 50px; top: auto; right:0; bottom: 0; left: 0; border :solid;}
    </style></head>
<body>
<div id="logoBar">...logobar...</div>
    <div id="leftSide">...leftside...</div>
    <div id="main">...main...</div>
    <div id="footer">...footer...</div>
    </body></html>

In this example, the fixed containers are outside the flow of the page contents. Their positions remain relative to the browser window, even when the browser window is resized. Once defined, they do not move from their assigned locations, which means they can block, or obscure from view, elements positioned underneath them. This makes careful placement of fixed-position elements and browser testing necessary considerations in your page design.

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.

Community Additions

ADD
Show:
© 2014 Microsoft