How to set the element position unchanged in css

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



The operating environment of this tutorial: windows7 system, css3 version, this method is applicable to all brand computers.

Recommendation:

The requirement we often encounter in "CSS Video Tutorial" is to want an element on the page to be fixed at a position in the browser, no matter how scrolling the scroll bar, the position does not change, such as the pop-up advertisement that we often see. The method is generally to use js control, or use css. What I wrote here is the control method of css.

In IE7 and above, as well as 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

1

2

3

4

5

6

7

8

#ads{     position:fixed;     right:0;     bottom:0;     border:1px solid red;     width:300px;     height:250px; } We define a #ads id style, and Set the height and width for him, and position the element in the lower right corner of the window through position: fixed and right and bottom.

















Use position:fixed to directly use the browser window as a reference for positioning. It is floating on the page, and the element position will not change with the scroll bar of the browser window; unless you move the screen position of the browser window on the screen, or Change the display size of the browser window, so the fixedly positioned element will always be located in a certain position of the view in 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, absolute positioning relative to the parent element, and then we can change the top value of #ads through expression.

The definition of PS expression: IE5 and later versions support the use of expression in CSS to associate CSS properties with JavaScript expressions. The CSS properties here can be inherent properties of elements or custom properties. In other words, the CSS property can be followed by a JavaScript expression, and the value of the CSS property is equal to the calculated result of the JavaScript expression. You can directly reference the attributes and methods of the element itself in the expression, or you can use other browser objects. This expression is like in 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:

1

2

3

4

5

#ads{     _position:absolute;     _top:expression(documentElement.scrollTop +





            documentElement.clientHeight-this.offsetHeight);

}

Everything seems to be perfect, but when we run it under IE6, we will find that as the scroll bar moves, our #adsfriend will jitter. The solution is also very simple, just add a little css to the body, as follows:

1

2

3

4

body{     background-image:url(about:blank); /* for IE6 */     background-attachment:fixed; /*Required* / } Alright, done! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! PS: Originally, "url(text.txt)" was used, but txt does not exist. The http request reports a 404 error, which affects the loading speed. Refer to some online writing, using 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 is used to eliminate jitters. Hope you can advise. The complete code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14











































15

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;

}