Comment réparer les éléments CSS3 sans faire défiler-Questions et réponses frontales-php.cn

Comment réparer les éléments CSS3 sans faire défiler

WBOY

Libérer： 2022-08-29 16:46:34

original

1232 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'attribut position pour fixer l'élément sans défilement. Cet attribut est utilisé pour spécifier le type de positionnement de l'élément. Lorsque la valeur de l'attribut est définie sur fixe, la position de l'élément est fixe relative. à la fenêtre du navigateur, ce qui peut être réalisé sans défilement, la syntaxe est "element {position:fixed;}".

Comment réparer les éléments CSS3 sans faire défiler

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

Comment réparer les éléments CSS3 sans défilement

En CSS, vous pouvez utiliser l'attribut de positionnement position pour fixer la position du div sur la page

L'attribut position spécifie le type de positionnement de l'élément.

Les éléments peuvent être positionnés à l'aide des attributs haut, bas, gauche et droite. Cependant, ces propriétés ne fonctionneront que si la propriété position est définie en premier. Ils fonctionnent également différemment selon la méthode de positionnement.

positionnement fixe

La position de l'élément est fixe par rapport à la fenêtre du navigateur.

Positionnement fixe, positionnement relatif à la création du navigateur, vous pouvez utiliser les quatre attributs top, right, bottom et left pour définir la position de l'élément par rapport à la fenêtre du navigateur. En utilisant des éléments de positionnement fixe, la position de l'élément reste fixe quelle que soit la façon dont vous faites défiler la fenêtre du navigateur.

L'exemple est le suivant :

<html>
<head>
<style type="text/css">
div{
position:fixed;
left:5px;
top:5px;
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
    <div></div>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><bbr/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><brr/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>sergsergsgs<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></><br/><br/>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment réparer les éléments CSS3 sans faire défiler