Fixed positioning

Article
10/10/2017

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.

Fixed positioning

Setting fixed positioning

See also

Concepts

Additional resources