So reparieren Sie Elemente in CSS

In CSS können Sie das Positionsattribut verwenden, um das Element zu fixieren. Für eine feste Positionierung müssen Sie dem Element nur den Stil „position:fixed“ hinzufügen. Die feste Positionierung erfolgt relativ zum Fenster. Unabhängig davon, ob der Schieberegler bewegt wird oder nicht, ist er an einer festen Position relativ zum Fenster fixiert. Andere Elemente ignorieren deren Existenz in der Positionsanordnung.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

#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 right and bottom.

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.

Definition von Ausdruck: 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 sehr 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; /*必须*/
}

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;
}

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo reparieren Sie Elemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!