Perfect solution for fixed positioning of IE6 position: fixed

About position: fixed; attributes

Generates absolute positioning elements, which are located relative to the browser window.

The positions of elements are defined by the "left", "top", "right", and "bottom" attributes.

Position: fixed; the position of an element on the webpage can be fixed to an absolute position without changing. (The top button in the lower right corner of the LOO2K blog is implemented using this CSS attribute)

General position: fixed; implementation method

Take my blog as an example. The CSS code used by the <div id = "top">... </div> HTML element in the lower right corner is as follows:

# Top {position: fixed; bottom: 0; right: 20px ;}

To fix the <div id = "top">... </div> element at the bottom of the browser and 20 pixels to the right.

How to implement position: fixed; in IE6

I just mentioned,In IE6, you cannot directly use position: fixed;. You need some CSS Hack to solve it. (Of course, IE6 is not just about position: fixed ;)

Let <div id = "top">... </div> fix the element at the bottom of the browser and 20 pixels to the right. This code is as follows:

# Top {position: fixed;

_ Position: absolute;

Bottom: 0;

Right: 20px;

_ Bottom: auto;

_ Top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )));}

The right and left attributes can be solved by absolute positioning, while top and bottom must be implemented by using the above expression. The _ symbol in _ position: absolute; can only be identified by IE6,To distinguish other browsers.

The above is just an example. The following is the most important code snippet:

Fix the element to the top of the browser

# Top {_ position: absolute; _ bottom: auto; _ top: expression(eval(document.doc umentElement. scrollTop ));}

Fix the element at the bottom of the browser

# Top {_ position: absolute; _ bottom: auto; _ top: expression(eval(document.documentelement.scrolltop#document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )));}

These two pieces of code can only be implemented at the bottom and top. You can use _ margin-top: 10px; or _ margin-bottom: 10px; to modify the position of the numerical control element.

Position: fixed; flashing

The problem has not been completely solved yet. After using the above method, you will find that the fixed positioning elements will flash when rolling the scroll bar. To solve the flash problem, add the following content to the CSS file:

* Html {background-image: url (about: blank); background-attachment: fixed ;}

* Is identified for IE6.

Perfect solution for fixed positioning of IE6 position: fixed