Heim > Artikel > Web-Frontend > So stellen Sie den Suspensionseffekt in CSS ein

So stellen Sie den Suspensionseffekt in CSS ein

青灯夜游Original: 2021-05-06 18:15:1720563Durchsuche

So legen Sie den Aufhängungseffekt in CSS fest: Fügen Sie dem Element zunächst den Stil „position: Fixed;“ hinzu, um die Position des Elements so zu fixieren, dass das Element auf der Seite angehalten wird und sich nicht mit der Bildlaufleiste des Elements ändert Browserfenster; dann verwenden Sie oben, unten, Die linken und rechten Attribute können die schwebende Position des Elements festlegen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Set-Aufhängungseffekt (feste Position)

<!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>

Rendering:

So stellen Sie den Suspensionseffekt in CSS ein

Beschreibung: Feste Positionierung (Position: fest;)

fixed generiert feste Positionierungselemente, und die Elemente befinden sich außerhalb des Der Dokumentfluss, der nicht die Position des Dokumentflusses einnimmt, kann als über dem Dokumentfluss schwebend und relativ zum Browserfenster verstanden werden.

Wenn Sie im Ebenenmodell eine feste Positionierung festlegen möchten, müssen Sie position:fixed; festlegen und das Browserfenster direkt als Referenz für die Positionierung verwenden. Die Position des Elements wird nicht angezeigt Scrollen Sie mit der Bildlaufleiste des Browserfensters, sofern Sie nicht die Bildschirmposition des Browserfensters auf dem Bildschirm verschieben oder die Anzeigegröße des Browserfensters ändern. Fest positionierte Elemente befinden sich immer irgendwo in der Ansicht innerhalb des Browserfensters wird durch den Fluss des Dokuments nicht beeinflusst.

Wenn wir beispielsweise eine lange Textzeichenfolge vorbereiten, sodass der Text die Breite eines Bildschirms überschreitet, stellen Sie den linken und oberen Rand des schwebenden Elements div1 auf 100 Pixel ein und ziehen Sie die Bildlaufleiste des Browsers an die Position des schwebenden Elements div1 wird sich nicht ändern.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo stellen Sie den Suspensionseffekt in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 position

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So legen Sie die Position des Hintergrundbilds in CSS festNächster Artikel：So legen Sie die Position des Hintergrundbilds in CSS fest

In Verbindung stehende Artikel

Mehr sehen