So legen Sie die Elementposition in CSS unverändert fest

So legen Sie die Elementposition in CSS unverändert fest: Erstellen Sie zunächst eine HTML-Beispieldatei. Definieren Sie dann einen ID-Stil von „#ads“ und legen Sie schließlich die Höhe und Breite des Elements an der angegebenen Position fest " und rechts und unten Nur der Standort.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, Thinkpad T480-Computer.

Empfehlung: „CSS-Video-Tutorial“

Die Anforderung, auf die wir häufig stoßen, ist, dass wir möchten, dass ein bestimmtes Element auf der Seite an einer Position im Browser fixiert wird, egal wie die Bildlaufleiste bewegt wird nicht ändern, wie zum Beispiel die Pop-ups, die wir oft sehen. Die Methode besteht im Allgemeinen darin, die JS-Steuerung oder CSS zu verwenden. Was ich hier schreibe, ist die CSS-Steuerungsmethode.

In IE7 und höher sowie in Firefox, Opera und Safari wird das CSS-Attribut „position:fixed“ unterstützt. Seine Funktion besteht darin, die Position des Elements relativ zum Fenster zu fixieren. Der Code lautet wie folgt:

#ads{
    position:fixed;
    right:0;
    bottom:0;
    border:1px solid red;
    width:300px;
    height:250px;
}

Wir definieren einen ID-Stil von #ads, legen die Höhe und Breite dafür fest und positionieren das Element in der unteren rechten Ecke des Fensters über position:fixed und rechts und unten.

Mit position:fixed können Sie das Browserfenster direkt als Referenz für die Positionierung verwenden. Es schwebt auf der Seite und die Elementposition ändert sich nicht mit der Bildlaufleiste des Browserfensters, es sei denn, Sie verschieben die Bildschirmposition Browserfenster auf dem Bildschirm anzeigen oder die Anzeigegröße des Browserfensters ändern, sodass sich das fest positionierte Element immer irgendwo in der Ansicht innerhalb des Browserfensters befindet und nicht vom Fluss des Dokuments beeinflusst wird.

Aber unter IE6 wird das Attribut position:fixed nicht unterstützt. Zu diesem Zeitpunkt müssen wir IE6 hacken. Die Lösung besteht darin, das Attribut postion:absolute zu verwenden. Seine Funktion ist jedem bekannt. Es führt eine absolute Positionierung relativ zum übergeordneten Element durch, und dann können wir den obersten Wert von #ads durch Ausdruck ändern.

PS-Ausdrucksdefinition: IE5 und spätere Versionen unterstützen die Verwendung von Ausdruck in CSS, um CSS-Attribute mit Javascript-Ausdrücken zu verknüpfen. Die CSS-Attribute können hier inhärente Attribute des Elements oder benutzerdefinierte Attribute sein. Das heißt, auf das CSS-Attribut kann ein Javascript-Ausdruck folgen, und der Wert des CSS-Attributs entspricht dem Ergebnis der Berechnung des Javascript-Ausdrucks. Sie können im Ausdruck direkt auf die Eigenschaften und Methoden des Elements selbst verweisen oder andere Browserobjekte verwenden. Der Ausdruck ist so, als ob er innerhalb einer Mitgliedsfunktion dieses Elements wäre.

So können wir den oberen Wert ändern, indem wir den Javascript-Wert in CSS berechnen. Der Code lautet wie folgt:

#ads{
    _position:absolute;
    _top:expression(documentElement.scrollTop + 
            documentElement.clientHeight-this.offsetHeight);
}

Es scheint, dass alles perfekt ist, aber wenn wir es unter IE6 ausführen, werden wir das feststellen, wenn sich die Bildlaufleiste bewegt , unser #adsFriend wird er schütteln. Die Lösung ist auch ganz einfach: Fügen Sie einfach ein wenig CSS zum Körper hinzu, wie folgt:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}

Okay, fertig! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

PS: „url(text.txt)“ wurde ursprünglich verwendet, aber txt existiert nicht. Die http-Anfrage meldete einen 404-Fehler, der die Ladegeschwindigkeit beeinträchtigte und about:blank verwendete um das gleiche Ziel zu erreichen.

Das Prinzip soll sein, dass ie6 keine festen unterstützt, aber sein Stilhintergrund kann verwendet werden, um Jitter zu beseitigen.

Vollständiger 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;
}

Das obige ist der detaillierte Inhalt vonSo legen Sie die Elementposition in CSS unverändert fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!