Im CSS-Positionsattribut: So verwenden Sie fest

Das Attribut

position gibt den Positionierungstyp des Elements an, d. h. den Positionierungsmechanismus, der zum Festlegen des Layouts des Elements verwendet wird. Jedes Element kann positioniert werden, aber absolut positionierte oder fest positionierte Elemente erzeugen eine Box auf Blockebene, unabhängig vom Typ des Elements selbst. Ein relativ positioniertes Element wird im normalen Fluss von seiner Standardposition versetzt.

Position Zusätzlich zum standardmäßigen statischen Wert umfassen die Attributwerte auch relative, absolute und feste Attributwerte.

1. Die Bedeutung des position:fixed-Attributs

fixed: Erzeugt absolut positionierte Elemente und positioniert sie relativ zum Browserfenster. Die Position des Elements wird über die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

Was wir normalerweise als feste Positionierung bezeichnen, bezieht sich auf feste Elemente, die nicht mit der Bildlaufleiste nach oben und unten scrollen.

2. Allgemeine position:fixed; Implementierungsmethode

#top{position:fixed;bottom:0;right:20px} erkennt, dass das Element mit der ID oben fixiert ist des Browsers und die Position 20 Pixel von rechts

#top{position:fixed;top:20px;right:20px} erkennt, dass das Element mit der ID top auf 20 Pixel vom oberen Rand des Browsers fixiert ist und 20 Pixel von rechts Die Position der Pixel

3. Implementierungsmethode von position:fixed unter IE6

Position:fixed kann nicht direkt in IE6 verwendet werden. Sie benötigen einen CSS-Hack, um das Problem zu beheben.

Dasselbe gilt für das Fixieren des 488a6885bf584ce482400a6e10a61400...16b28748ea4df4d9c2150843fecfba68-Elements am unteren Rand des Browsers und 20 Pixel davon entfernt the right , dieses Mal lautet der Code:

#top{position:fixed;bottom:0;right:20px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

Die rechten und linken Attribute können mithilfe der absoluten Positionierung gelöst werden, während oben und unten mithilfe des obigen Ausdrucks implementiert werden müssen. Das _-Symbol in _position:absolute; kann nur von IE6 erkannt werden. Der Zweck besteht darin, andere Browser zu unterscheiden:

2. Das Element einen Pixel vom oberen Rand des Browserfensters entfernt korrigiert:

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));}

oder

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
_margin-top:a;
}

3. Das Element am unteren Rand des Browserfensters korrigiert:

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+a));
}

4. Die Pixel des Elements B vom unteren Rand des Browserfensters wurden korrigiert:

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

oder

#top{
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:b;
}

#top{
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||b)-(parseInt(this.currentStyle.marginBottom,10)||b)));
}

Das obige ist der detaillierte Inhalt vonIm CSS-Positionsattribut: So verwenden Sie fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!