前端之 position的fixed和sticky的区别，含页面小测试

最新推荐文章于 2024-08-18 17:01:30 发布

x_i_a_o_b_a_i

最新推荐文章于 2024-08-18 17:01:30 发布

阅读量5k

点赞数 15

分类专栏：前端经验 position

本文链接：https://blog.csdn.net/x_i_a_o_b_a_i/article/details/104382951

版权

前端经验同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

position

1 篇文章 0 订阅

订阅专栏

position的fixed和sticky的区别

fixed相对于相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。不管视口如何滚动，它的位置始终不变。

fixed如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box{
				position: fixed;
				width: 200px;
				height: 200px;
				border: 1px solid #0000FF;
				
			}
			.warp{
				height: 3000px;
				background-color: antiquewhite;
			}
			.box_out{
				width: 400px;
				height: 400px;
				border: 1px solid #0000FF;
			}
		</style>
	</head>
	<body>
		<div class="warp">
			<div class="box_out">
				<div class="box"></div>
			</div>
		</div>
	</body>
</html>

随着插入图片描述
在这里插入图片描述
而sticky则是在目标区域内随着页面的滚动而保持在固定位置，超出这个区域后就就随着目标区域滚动。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box{
				position: sticky;
				width: 200px;
				height: 200px;
				border: 1px solid #0000FF;
				top: 2px;
			}
			.warp{
				height: 3000px;
				background-color: antiquewhite;
			}
			.box_out{
				width: 400px;
				height: 400px;
				border: 1px solid #0000FF;
			}
		</style>
	</head>
	<body>
		<div class="warp">
			<div class="box_out">
				<div class="box"></div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述