How to set element position unchanged in css

Css method to set the element position unchanged: first create an HTML sample file; then define an id style of "#ads" and set the height and width; finally use "position:fixed" and right and bottom to Just position the element at the specified position.

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommended: "css Video Tutorial"

The demand we often encounter is that we want a certain element of the page to be fixed at a position in the browser, no matter how the scroll bar is scrolled , the position remains unchanged, just like the pop-up advertisements you often see. The method is generally to use js control, or use css. What I write here is the css control method.

In IE7 and above and in Firefox, Opera, and Safari, the CSS attribute "position:fixed" is supported. Its function is to fix the position of the element relative to the window. The code is as follows

#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. Position:fixed and right and bottom position the element in the lower right corner of the window.

Use position:fixed to position directly with the browser window as a reference. It floats in the page, and the position of the element will not change with the scroll bar of the browser window; unless you move the browser on the screen The screen position of the window, or changing the display size of the browser window, so the fixedly positioned element will always be somewhere in the view within the browser window and will not be affected by the flow of the document.

But under IE6, the position:fixed attribute is not supported. At this time, we need to hack IE6. The solution is to use the postion: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.

PS expression definition: 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 they can be Custom properties. 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; /*必须*/
}

Okay, done! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

PS: "url(text.txt)" was originally used, but txt does not exist. The http request reported a 404 error, which affected the loading speed. I referred to some writing methods on the Internet and used about: blank can achieve the same purpose.

The principle is said to be that ie6 does not support fixed, but its style background supports fixed. The background can be used to eliminate jitter. I hope you can give me some advice.

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;
}

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