admin管理员组

文章数量:1611919

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

使用注意事项：

  1. 父元素不能有 overflow 属性

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

  3. 仅在父元素内生效，父元素的高度必须大于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>

	<body>
		<div id="fs">
			<div id="ad"></div>
			<div class="csstricky"></div>
		</div>
	</body>
</html>

当<div class="csstricky"></div>这个div距离顶部小于我们所设置的 50px 的时候，

position: sticky 就相当于 position:fixed ，div就会被固定在top：50px 的位置处

好啦，今天的学习就到这啦，文章有什么问题可以在评论区指正哦~❤️

本文标签： cssPositionSticky

版权声明：本文标题：css position的sticky定位 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728603643a1165173.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。