sticky的基本使用

最新推荐文章于 2024-03-14 00:15:00 发布

_HtwoO

最新推荐文章于 2024-03-14 00:15:00 发布

阅读量1.2k

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_30418537/article/details/118077013

版权

position: sticky

position: sticky粘性定位：是css新增的一个position属性。说是对于IOS的兼容性好一点，对于安卓的兼容性不太好

于position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。

适用场合：一开始不显示，滚动到一定位置需要显示的元素

使用注意事项：

父元素不能有overflow属性
left、top、right、bottom必须要有一个
仅在父元素内生效，父元素的高度必须大于sticky元素的高度
ios加前缀-webkit-sticky（考虑到兼容问题）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		.header {
			height: 100px;
			background: #FAEBD7;
		}
		.parent {
			/* width: 200px; */
			height: 200px;
			background-color: #FF0000;
			/* margin-top: 40px; */
			/* overflow: auto; */
		}
		.child{
			position: sticky;
			top: 0px;
			/* width: 200px; */
			height: 50px;
			background-color: blue;
			/* margin-top: 60px; */
		}
		.child2 {
			height: 800px;
			background-color: #FFD700;
		}
	</style>
</head>
<body>
	<div class="header">
		
	</div>
	<div class="parent">
		<div class="child">	
		</div>
		<div class="child2">
			222
		</div>
	</div>
</body>
</html>

_HtwoO

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
sticky的基本使用

position: stickyposition: sticky粘性定位：是css新增的一个position属性。说是对于IOS的兼容性好一点，对于安卓的兼容性不太好于position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失
复制链接

扫一扫