How to fix elements in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to fix elements in css

醉折花枝作酒筹

Apr 13, 2021 pm 05:03 PM

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

How to use attribute selectors in CSS?Jul 23, 2025 am 03:50 AM

In CSS, the attribute selector can set styles according to the attributes and values of the element, providing more flexible style control. ①Basic usage: Select elements with specific attributes, such as input[type] to match all inputs containing type attributes; ②Exact match: Use = to match specific attribute values, such as input[type="text"] to match only the text input box; ③ Partial match: Use = (include), ^= (start), and $= (end), to match part of the attribute values, such as a[href="//m.sbmmt.com/m/faq/example.com"] to match anchors containing specific links; ④Combination match: match multiple attributes at the same time, such as inputtype=&qu

What is the purpose of the CSS `will-change` property?Jul 23, 2025 am 03:47 AM

will-change is a CSS property that is used to inform browser elements in advance of possible changes to optimize performance. Its core function is to enable the browser to create layers in advance to improve rendering efficiency. Common values include transform, opacity, etc., and can also be separated by multiple attribute commas; it is suitable for non-standard attribute animations, complex component transitions and user interaction triggered animations; but it must be avoided abuse, otherwise it will lead to excessive memory usage or increased GPU load; the best practice is to apply before the change occurs and remove it after it is completed.

What is the difference between `display: none` and `visibility: hidden`?Jul 23, 2025 am 03:43 AM

The main difference between display:none and visibility:hidden is whether the element occupies space and its impact on the layout. 1.display:none will completely remove elements, do not take up space, and the layout will be readjusted; suitable for permanent or dynamic hidden elements. 2.visibility:hidden makes elements invisible but still retain their space and the layout remains unchanged; suitable for situations where structures need to be stable. 3.display:none hides all child elements at the same time, while visibility:hidden can control the display status of child elements separately. When selecting, it is determined based on whether the element is expected to affect the layout.

How to change text color in CSSJul 23, 2025 am 03:42 AM

To change the color of web page text, the most direct way is to use the color attribute of CSS. 1. Color can be set through color name, hexadecimal, RGB or HSL; 2. Different elements can be set separately, such as navigation links and paragraphs; 3. Flexible color matching is achieved through class selectors; 4. Note that the color attribute is inheritable, and the child elements will inherit the color of the parent element by default, and the style needs to be covered separately to avoid conflicts.

What is grid-auto-flow in CSS Grid?Jul 23, 2025 am 03:33 AM

Thegrid-auto-flowpropertyinCSSGridcontrolshowitemsareautomaticallyplacedwhennotexplicitlypositioned.Bydefault,it’ssettorow,fillingitemslefttoright,rowbyrow;changingittocolumnfillsitemstoptobottom,columnbycolumn.Itcanalsobepairedwithdensetocompactlayo

How to create a simple accordion with pure CSS?Jul 23, 2025 am 03:24 AM

Using pure CSS to achieve the accordion effect can be completed through HTML and tags. The specific steps are as follows: 1. Use and tags to achieve the expansion and collapse function, with clear semantics and support barrier-free access; 2. Set details borders, inner margins and other styles through CSS to unify the appearance, and hide the default arrows; 3. Note that multiple panels cannot be expanded at the same time through pure CSS restrictions, so JavaScript needs to be introduced to implement this function. In summary, basic functions do not require JS, but complex interactions still require script support.

Describe CSS paint orderJul 23, 2025 am 03:20 AM

In CSS, the order of drawing elements is affected by a variety of factors. By default, the browser draws in the order of positioning elements in the background and border → text content → child elements. 1. The default drawing order does not follow the DOM structure completely, but follows the painting order; 2. The hierarchy consists of whether the same stacking context belongs to the same stacking context and whether a new stacking context is created (such as transform, filter, opacity).

What is the difference between auto-fit and auto-fill in CSS Grid?Jul 23, 2025 am 03:17 AM

auto-fillcreatesasmanytracksaspossible,leavingemptyslotsiftherearen’tenoughitems,whileauto-fitresizestrackstofillthespace,avoidingemptiness.1.auto-fillmaintainsafixedstructure,generatingtracksevenifempty,idealforpredictablelayouts.2.auto-fitadjuststr

See all articles

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

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

Hot Article

Oguri Cap Build Guide | A Pretty Derby Musume

3 weeks agoByJack chen

Agnes Tachyon Build Guide | A Pretty Derby Musume

2 weeks agoByJack chen

Grass Wonder Build Guide | Uma Musume Pretty Derby

2 weeks agoByJack chen

PEAK How to Emote

4 weeks agoByJack chen

How to Fix KB5060829 Not Installing & Other Reported Bugs

3 weeks agoByDDD

Hot Tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),