【web前端(十九)】html_固定定位

最新推荐文章于 2025-05-12 10:53:06 发布

原创最新推荐文章于 2025-05-12 10:53:06 发布 · 388 阅读

1 ·

CC 4.0 BY-SA版权

Java 专栏收录该内容

118 篇文章

订阅专栏

本文通过一个实例详细解析了CSS中固定定位（position: fixed）的使用方法及其效果。固定定位的元素相对于浏览器窗口进行定位，当页面滚动时，其位置保持不变。适合初学者理解并实践固定定位的应用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
		<style>
			/*该定位即是被定义了的块，
			 在界面窗口上来看，即使滚动滑轮，
			 其位置还是在我们看到的位置浮动。*/
			.father{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				position: relative;
			}
			
			.c1{
				width: 100px;
				height: 100px;
				background-color: #124444;
				position:fixed;
				top: 200px;
				right: 0;
			}

		</style>
	</head>
	<body>
		<div class="father">
			<div class="c1">
				
			</div>
		</div>
		
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
		<div>asdfghjkl</div>
	</body>
</html>

我们可以滚动滚轮，观察黑块的位置：