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).

The following example includes a typical layout representing fixed attributes:

 <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;}
<div id="logoBar">...logobar...</div>
    <div id="leftSide">...leftside...</div>
    <div id="main">...main...</div>
    <div id="footer">...footer...</div>

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.

Community Additions