如何设置跟随滚动条一起滚动的div

最新推荐文章于 2025-05-30 14:39:43 发布

-贫寒豌豆

最新推荐文章于 2025-05-30 14:39:43 发布

阅读量3.4w

点赞数 11

分类专栏： css 文章标签： css position fixed

本文链接：https://blog.csdn.net/flygoa/article/details/46530659

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用CSS的position属性实现元素的固定定位。通过设置position为fixed，可以使元素相对于浏览器窗口进行定位，而不随页面滚动而移动。文章提供了一个实例，展示了如何创建一个始终位于窗口特定位置的方块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理

使用css的定位属性position，设其值为fixed即可，该属性是将指定元素绝对定位于窗体，使用left，right，top和bottom属性来设置偏移于窗体原点的位置。

实例源码

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<style type="text/css">
			.mainBox{
				margin:0px 10px;
				width:400px;
				height:400px;
				position:relative;
				background:#FF0000;
			}
			.sourceBox{
				float:left;
				width:100px;
				height:100px;
				position:relative;
				background:#00FFFF;
			}
			.fixedBox{
				z-index:10;
				width:100px;
				height:100px;
				position:fixed;
				left:50px;
				top:50px;
				background:#00FF00;
			}
		</style>
	</head>

	<body>
		<div class="fixedBox">跟随窗口
		</div>
		<div class="mainBox">
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
		</div>
		<div class="mainBox">
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
		</div>
		<div class="mainBox">
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
			<div class="sourceBox">
			</div>
		</div>
	</body>
</html>