CSS fixed element location (fixed)

The requirement that we often meet is that one element of the page is pinned to a location in the browser, regardless of the scroll bar, and the position remains the same, such as a pop-up ad that is often seen. The method is usually using JS control, or using CSS. Here I write the control method of CSS.

CSS Properties "position:fixed" are supported in IE7 and above, as well as in Firefox, Opera, and Safari, and are used to position elements relative to the window. The code is as follows

#ads{
Position:Fixed;
Right:0;
    bottom:0;
    border:1px solid red;
    width:300px;
    height:250px;
/span>

We define a #ads ID style and set a height width for him, positioning the element in the lower-right corner of the window through position:fixed as well as the bottom.

However, under IE6, the position:fixed attribute is not supported, and this time we need to hack handle the IE6. The solution is to use the Postion:absolute property, which is very familiar to everyone, relative to the parent element for absolute positioning, and then we can change the top value of the #ads by expression.

PS expression definition:IE5 and later versions support the use of expression in CSS to associate CSS properties with Javas cript expressions, where the CSS property can be either an intrinsic property of an element or a custom property. That is, the CSS property can be followed by a javas cript expression, and the value of the CSS property equals the result of the Javas cript expression evaluation. You can directly reference the properties and methods of the element itself in an expression, or you can use other browser objects. The expression is as if it were in a member function of the 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 under the IE6 we will find that as the scroll bar moves, this #ads friend of ours will shake. The workaround is also very simple, just add a little bit of CSS in the body, as follows:

Body{
Background-image:url (about:blank); / * for IE6 * /
Background-attachment:fixed; / * must */
}

All right, complete!!!!!!!!!!!!!!!!!!!!!!!!.

There's wood and!!!!!!!!!!!!!!!!!!!!!!!!.

PS: Originally used is "url (text.txt)", but txt this is not exist, HTTP request 404 error, resulting in impact loading speed, referring to some of the online wording, using About:blank can achieve the same purpose.

The principle is said to be IE6 does not support fixed and its style background but support fixed, through the background to eliminate the jitter, hope Daniel Advice.

The complete code:

Body{
Background-image:UrlAbout:blank);/*For IE6*/
Background-attachment:Fixed;/*Have to*/
}
#ads{
Width:300px;
Height:250px;
Position:Fixed;
Right:0
    bottom:0;
    _position:absolute< Span style= "color: #000000;" >;
    _top:expression (documentelement.scrolltop + documentelement.clientheight-this.offsetheight) ;
    border:1px solid red;
/span>

CSS fixed element location (fixed)