Comment définir l'effet de suspension en CSS-tutoriel CSS-php.cn

Comment définir l'effet de suspension en CSS

青灯夜游

Libérer： 2023-01-05 16:13:35

original

20584 Les gens l'ont consulté

Comment définir l'effet de suspension en CSS : ajoutez d'abord le style "position:fixed;" à l'élément pour fixer la position de l'élément afin que l'élément soit suspendu dans la page et ne change pas avec le barre de défilement de la fenêtre du navigateur, puis utilisez les attributs haut, bas, gauche et droite pour définir la position flottante de l'élément.

Comment définir l'effet de suspension en CSS

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

effet de suspension de réglage CSS (position fixe)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>DIV悬浮示例-纯CSS实现</title>

		<style type="text/css">
			/*设置了高度，可以上下滚动*/
			
			body {
				height: 1800px;
				background: #dddddd;
			}
			/*div通用样式*/
			
			div {
				background: #1a59b7;
				color: #ffffff;
				overflow: hidden;
				z-index: 9999;
				position: fixed;  /*DIV悬浮(固定位置)*/
				padding: 5px;
				text-align: center;
				width: 175px;
				height: 22px;
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}
			/*右上角*/
			
			div.right_top {
				right: 10px;
				top: 10px;
			}
			/*右下角*/
			
			div.right_bottom {
				right: 10px;
				bottom: 10px;
			}
			/*屏幕中间*/
			
			div.center_ {
				right: 45%;
				top: 50%;
			}
			/*左上角*/
			
			div.left_top {
				left: 10px;
				top: 10px;
			}
			/*左下角*/
			
			div.left_bottom {
				left: 10px;
				bottom: 10px;
			}
		</style>

	</head>

	<body>
		<div class="right_top"> 我是右上角悬浮的div</div>
		<div class="right_bottom"> 我是右下角悬浮的div</div>
		<div class="center_"> 我是屏幕中间悬浮的div</div>
		<div class="left_top"> 我是左上角悬浮的div</div>
		<div class="left_bottom"> 我是左下角悬浮的div</div>
	</body>

</html>

Copier après la connexion

Rendu :

Comment définir leffet de suspension en CSS

Description : Positionnement fixe (position : fixe ;)

fixe génère des éléments de positionnement fixes. Les éléments sont séparés du flux de documents et n'occupent pas la position du flux de documents. Il peut être compris comme flottant. au-dessus du flux de documents, par rapport à La fenêtre du navigateur est positionnée.

Si vous souhaitez définir un positionnement fixe dans le modèle de calque pour un élément, vous devez définir position:fixed; et utiliser directement la fenêtre du navigateur comme référence pour le positionnement, et elle flotte dans la page. la position de l'élément ne suivra pas la fenêtre du navigateur. La barre de défilement change à mesure que vous faites défiler, à moins que vous ne déplaciez la position de la fenêtre du navigateur sur l'écran ou que vous modifiiez la taille d'affichage de la fenêtre du navigateur, de sorte que les éléments positionnés de manière fixe seront toujours situés quelque part. dans la vue dans la fenêtre du navigateur et ne sera pas affecté par les effets du flux de documents.

Par exemple, si nous préparons une longue chaîne de texte pour que le texte dépasse la largeur d'un écran, définissons la gauche et le haut de l'élément flottant div1 sur 100px et faisons glisser la barre de défilement du navigateur, la position de l’élément flottant div1 ne changera pas.

(Partage de vidéos d'apprentissage : 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!