Dans l'attribut de position CSS : comment utiliser le paramètre fixe

L'attribut

position spécifie le type de positionnement de l'élément, c'est-à-dire le mécanisme de positionnement utilisé pour établir la disposition de l'élément. N'importe quel élément peut être positionné, mais les éléments absolument positionnés ou positionnés de manière fixe généreront une boîte au niveau du bloc, quel que soit le type de l'élément lui-même. Un élément positionné relativement est décalé par rapport à sa position par défaut dans un écoulement normal.

position En plus de la valeur statique par défaut, les valeurs d'attribut​​incluent également les valeurs relatives, absolues et fixes. Cet article se concentre sur la valeur d'attribut fixe.

1. La signification de l'attribut position:fixed

fixed : Génère des éléments positionnés de manière absolue et les positionne par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

Ce que nous appelons habituellement le positionnement fixe fait référence au fixe. Les éléments avec un positionnement fixe ne défileront pas de haut en bas avec la barre de défilement.

2. Position générale :fixed ; méthode d'implémentation

#top{position:fixed;bottom:0;right:20px} se rend compte que l'élément avec l'identifiant top est fixé en bas du navigateur et la position à 20 pixels à partir de la droite

#top{position:fixed;top:20px;right:20px} se rend compte que l'élément avec l'identifiant top est fixé à 20 pixels du haut du navigateur et 20 pixels à partir de la droite La position des pixels

3. Méthode d'implémentation de position:fixed; sous IE6

Position:fixed ne peut pas être utilisé directement dans IE6; Vous aurez besoin d'un hack CSS pour le réparer

Identique à avoir l'élément 488a6885bf584ce482400a6e10a61400...16b28748ea4df4d9c2150843fecfba68 fixé en bas du navigateur et à 20 pixels de à droite, cette fois le code est :

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

Les attributs de droite et de gauche peuvent être résolus par positionnement absolu, tandis que haut et bas doivent être implémentés en utilisant l'expression ci-dessus. Le symbole _ dans _position:absolute; ne peut être reconnu que par IE6. Le but est de distinguer les autres navigateurs

1. Corrigez l'élément en haut de la fenêtre du navigateur :

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

2. Correction de l'élément à un pixel du haut de la fenêtre du navigateur :

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

ou

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

3. Correction de l'élément en bas de la fenêtre du navigateur :

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

4. Correction de l'élément b pixels en bas de la fenêtre du navigateur :

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

ou

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!