Comment réparer des éléments en CSS

En CSS, vous pouvez utiliser l'attribut position pour fixer l'élément ; il vous suffit d'ajouter le style "position:fixed" à l'élément pour un positionnement fixe. Le positionnement fixe est positionné par rapport à la fenêtre Que le curseur soit déplacé ou non, il est fixé à une position fixe par rapport à la fenêtre ; les autres éléments ignoreront leur existence dans la disposition des positions.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

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

Nous définissons un style d'identification 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.

Cependant, 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 : IE5 et les versions ultérieures prennent en charge l'utilisation de l'expression en CSS pour associer les attributs CSS aux expressions Javascript. Les attributs CSS ici peuvent être des attributs inhérents à l'élément ou 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 utiliser d'autres objets du navigateur. L'expression est comme si elle se trouvait dans une fonction membre de cet élément.

On peut donc changer 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 parfait, mais quand on l'exécutera sous IE6, on le fera. 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; /*必须*/
}

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

Apprentissage recommandé : tutoriel vidéo CSS

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!