Comment implémenter un div CSS qui ne bouge pas avec la barre de défilement

Comment implémenter un div CSS qui ne bouge pas avec la barre de défilement : créez d'abord un exemple de fichier ; puis définissez le style d'attribut CSS du div sur "position:fixed;" pour empêcher le div de se déplacer avec la barre de défilement.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3. Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

Définition CSS du div pour ne pas bouger avec la barre de défilement

Corriger un contenu à une certaine position A, positionnée par rapport à la fenêtre du navigateur. Le positionnement fixe est utilisé ici.

Le positionnement comprend généralement le positionnement absolu et le positionnement relatif. Ceux-ci sont relatifs aux éléments de bloc dans le corps, mais si vous souhaitez qu'un certain contenu soit fixé à une certaine position, quel que soit le défilement, peu importe où la barre glisse. , il sera toujours dans la fenêtre du navigateur, vous devez donc utiliser fixe.

La boîte d'éléments fixes se comporte comme si la position était définie sur absolue, mais son bloc contenant est la fenêtre elle-même. Acceptez d'avoir des valeurs de gauche, haut, droite, bas. Son utilisation est similaire à l'absolu.

Exemple :

<div style="width:100px; height:100px; border:1px solid red; position:fixed; left:300px; top:300px;">
    固定的内容
</div>

Le div ci-dessus a une largeur de 100, une hauteur de 100 et se trouve à 300 pixels du coin supérieur gauche du navigateur. Il ne défile pas lorsque la page défile. .

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!