search
HomeWeb Front-endCSS TutorialHow 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.

How to fix elements in css

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Revisiting CSS border-imageRevisiting CSS border-imageApr 22, 2025 am 10:08 AM

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

Accessibility EventsAccessibility EventsApr 22, 2025 am 10:07 AM

“There isn't some way to know when—…?”

Make it hard to screw up driven developmentMake it hard to screw up driven developmentApr 22, 2025 am 10:02 AM

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 in Under an Hour with VuelidateForm Validation in Under an Hour with VuelidateApr 22, 2025 am 10:00 AM

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

Yet Another JavaScript FrameworkYet Another JavaScript FrameworkApr 22, 2025 am 09:53 AM

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

What Are Design Tokens?What Are Design Tokens?Apr 22, 2025 am 09:44 AM

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

An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array MethodsAn Illustrated (and Musical) Guide to Map, Reduce, and Filter Array MethodsApr 22, 2025 am 09:41 AM

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

Advanced Tooling for Web ComponentsAdvanced Tooling for Web ComponentsApr 22, 2025 am 09:37 AM

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.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

DVWA

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

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools