CSS position的sticky定位

最新推荐文章于 2025-07-14 12:45:06 发布

原创最新推荐文章于 2025-07-14 12:45:06 发布 · 324 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #java

收录于

本文详细介绍了CSS中新增的粘性定位(position:sticky)特性及其使用注意事项。粘性定位能够实现元素从相对定位到固定定位的平滑过渡，适用于创建导航栏等场景。文章通过示例代码展示了如何设置及应用粘性定位。

position: sticky -粘性定位(是css新增的一个position属性)

使用注意事项：

父元素不能有 overflow 属性

left、top、right、bottom必须要设置一个

仅在父元素内生效，父元素的高度必须大于sticky元素设置的高度

简单理解就是，当你页面滚动的距离小于你设置的 left、top、right、bottom的值时
position: sticky 就相当于 position:relative

当你页面滚动的距离小于你设置的 left、top、right、bottom的值时

position: sticky 就相当于 position:fixed

代码展示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*粘性定位，当用户滑动的距离超过top设置的值时，就相当于position:fixed定位
当用户滑动的距离没超过top设置的值时，就相当于position:relative定位*/
.csstricky{
position: sticky;
width: 30px;
height: 30px;
background: aqua;
top: 50px;
}
#fs{
height: 2000px;
width: 100%;
}
#ad{
height: 300px;
width: 100%;
background:black;
}
</style>
</head>