How to fix elements in css

In CSS, you can use the position attribute to make the element fixed; you only need to add the "position:fixed" style to the element for fixed positioning. Fixed positioning is positioned relative to the window. Regardless of whether the slider is moved or not, it is fixed at a fixed position relative to the window; other elements will ignore their existence in the position arrangement.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

#ads{
    position:fixed;
    right:0;
    bottom:0;
    border:1px solid red;
    width:300px;
    height:250px;
}

We define an id style for #ads, and set the height and width for it, and position the element in the lower right corner of the window through position:fixed and right and bottom.

But under IE6, the position:fixed attribute is not supported. At this time, we need to hack IE6. The solution is to use the position:absolute attribute. Its function is familiar to everyone. It performs absolute positioning relative to the parent element. Then we can change the top value of #ads through expression.

Definition of expression: IE5 and later versions support the use of expression in CSS to associate CSS attributes with Javascript expressions. The CSS attributes here can be inherent attributes of the element or can be customized. Attributes. That is to say, the CSS attribute can be followed by a Javascript expression, and the value of the CSS attribute is equal to the result of the Javascript expression calculation. You can directly reference the properties and methods of the element itself in the expression, or use other browser objects. The expression is as if it were within a member function of this element.

So we can change the top value by calculating the javascript value in css. The code is as follows:

#ads{
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
}

It seems that everything is perfect, but when we run it under IE6, we will find that as As the scroll bar moves, our #ads friend shakes. The solution is also very simple, just add a little bit of css to the body, as follows:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}

Complete code:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}
#ads{
    width:300px;
    height:250px;
    position:fixed;
    right:0;
    bottom:0;
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    border:1px solid red;
}

Recommended learning: css video tutorial

The above is the detailed content of How to fix elements in css. For more information, please follow other related articles on the PHP Chinese website!