IE6 position: Fixed bug (fixed window method)

Today, Herb asked on Twitter how to use CSS to fix search entries in a certain position in the window. It seems that I have encountered this problem before, but it was not solved at the time. There is a ready-made method for using Js. However, this requirement is that JS is not needed. Then, start writingCodeIn the end, there is still a problem in IE6. Position: fixed; not displayed properly.

 

Correct code: preview/demo | ie6_position_fixed_bug.txt (Source code)

In otherArticleYou can use position: absolute; To solve the IE6 problem. However, after adding position: absolute;, it still fails. Of course, the final solution is to use position: absolute. However, it may not be successful. Because there is a very important sentence that needs to be understood.

The absolute position of the fixed element is relative to that of the HTML element. The scroll bar is the body element. (Via. I didn't find the source just now, thanks.)

Only by remembering this sentence can we know why position: absolute; results are given in many places, but they cannot be solved at the time. Because I set position: relative for HTML. The above sentence inspired me to solve this problem. When we pull the scroll bar, the content will scroll with the window; then the scroll is the body. If the parent element that is absolutely located is set to the body, a module that needs to be fixed will be fixed to a certain position on the webpage, rather than a certain position in the window (which seems to be in Firefox, the limit between HTML and body is not clear ?).

What we need to do is maintain the original height of the body, so that HTML has only one window so high. The code can be written as follows:

HTML {overflow: hidden;} // important!
Body {Height: 100%; overflow: auto ;}

At this time, HTML will only have one window so high, more than, direct hide. The body automatically changes with the height. In this case, we can use absolute positioning to locate the module we want to fix at a certain position in the window. Suppose we want to fix the content in the upper right corner, the code can be written as follows:

HTML {overflow: hidden ;}
Body {Height: 100%; overflow: auto ;}
# Rightform FORM {position: absolute; Right: 30px; top50px ;}

In this way, the window is fixed in the upper right corner. Other browsers can use position: fixed; To solve fixed problems. Complete code for other browsers is as follows:

# Rightform {text-align: center; padding: 50px; Font: 14px/22px Georgia, "Times New Roman", times, Serif; Height: pixel PX; Background: # FFC ;}
# Rightform H1 {font-family: Arial; Background: # e8edef; Height: 300px; line-Height: 300px; margin-bottom: 200px ;}
# Rightform P {Line-Height: 1.5em; Background: # ffdfff; padding: 90px 0 ;}
# Rightform FORM {background-color: # DDD; padding: 10px 20px; Border: 1px solid # AAA; position: fixed; Right: 30px; top: 120px ;}

For the complete code, see the TXT file provided in the above link. The principle of the problem is that simple. I don't know. Do you understand?

Source: Happy favorites