Comment définir la position de l'élément inchangée en CSS

Comment définir la position de l'élément inchangée en CSS : créez d'abord un exemple de fichier HTML ; puis définissez un style d'identifiant de "#ads" et définissez enfin la hauteur et la largeur ; utilisez "position:fixed" et right et ; bottom pour positionner simplement l’élément à la position spécifiée.

L'environnement d'exploitation de ce tutoriel : système windows7, version css3, ordinateur thinkpad t480.

Recommandation : "Tutoriel vidéo CSS"

La demande que nous rencontrons souvent est de vouloir qu'un certain élément de la page soit fixé à une position dans le navigateur, non Quelle que soit la façon dont la barre de défilement défile, la position reste inchangée, tout comme les publicités pop-up que vous voyez souvent. La méthode consiste généralement à utiliser le contrôle js ou à utiliser css. Ce que j'écris ici est la méthode de contrôle CSS.

Dans IE7 et supérieur, Firefox, Opera et Safari, l'attribut CSS "position:fixed" est pris en charge. Sa fonction est de fixer la position de l'élément par rapport à la fenêtre. Le code est le suivant

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

Nous définissons un style d'identifiant de #ads, définissons sa hauteur et sa largeur, et positionnons l'élément dans le coin inférieur droit de la fenêtre via position:fixed et right et bottom .

Utilisez position:fixed pour positionner directement avec la fenêtre du navigateur comme référence. Il flotte dans la page, et la position de l'élément ne changera pas avec la barre de défilement de la fenêtre du navigateur sauf si vous déplacez le navigateur ; sur l'écran La position de la fenêtre à l'écran, ou la modification de la taille d'affichage de la fenêtre du navigateur, de sorte que l'élément positionné de manière fixe soit toujours quelque part dans la vue dans la fenêtre du navigateur et ne soit pas affecté par le flux du document.

Mais sous IE6, l'attribut position:fixed n'est pas pris en charge pour le moment, nous devons pirater IE6. La solution est d'utiliser l'attribut postion:absolute. Sa fonction est familière à tout le monde. Il effectue un positionnement absolu par rapport à l'élément parent. Nous pouvons ensuite modifier la valeur supérieure de #ads via l'expression.

Définition de l'expression PS : IE5 et les versions ultérieures prennent en charge l'utilisation d'expression en CSS pour associer des attributs CSS à des expressions Javascript. Les attributs CSS ici peuvent être des attributs inhérents à l'élément, ou ils peuvent être des propriétés personnalisées. C'est-à-dire que l'attribut CSS peut être suivi d'une expression Javascript et que la valeur de l'attribut CSS est égale au résultat du calcul de l'expression Javascript. Vous pouvez référencer directement les propriétés et les méthodes de l'élément lui-même dans l'expression, ou vous pouvez utiliser d'autres objets du navigateur. L'expression est comme si elle se trouvait dans une fonction membre de cet élément.

Nous pouvons donc modifier la valeur supérieure en calculant la valeur javascript en css. Le code est le suivant :

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

Tout semble être parfait, mais lorsque nous l'exécuterons sous IE6, nous le ferons. constatez qu'à mesure que la barre de défilement bouge, notre ami #ads tremble. La solution est également très simple, il suffit d'ajouter un peu de CSS au corps, comme suit :

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

D'accord, c'est fait ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

PS : "url(text.txt)" a été utilisé à l'origine, mais txt n'existe pas. La requête http a signalé une erreur 404, ce qui a affecté la vitesse de chargement. J'ai fait référence à certaines méthodes d'écriture sur Internet et. utilisé à propos de : le blanc peut atteindre le même objectif.

Le principe est que ie6 ne prend pas en charge le style fixe, mais son style d'arrière-plan prend en charge le mode fixe. J'espère que vous pourrez me donner quelques conseils.

Code complet :

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

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!