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!

I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s

Development is complicated. Our job is an ongoing battle between getting the job done and doing that job in a safe, long-lasting way.

Form validation has a reputation for being tricky to implement. In this tutorial, we’ll break things down to alleviate some of that pain. Creating nice

On March 6, 2018, a new bug was added to the official Mozilla Firefox browser bug tracker. A developer had noticed an issue with Mozilla's nightly build. The

I’ve been hearing a lot about design tokens lately, and although I’ve never had to work on a project that’s needed them, I think they’re super interesting and

Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power in a short amount of space. Let’s jump right

Over the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

SublimeText3 Mac version
God-level code editing software (SublimeText3)

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver Mac version
Visual web development tools