CSS position:sticky

最新推荐文章于 2024-09-14 21:11:46 发布

快乐de馒头

最新推荐文章于 2024-09-14 21:11:46 发布

阅读量565

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/104060708

版权

css 专栏收录该内容

39 篇文章 5 订阅

订阅专栏

CSS position:sticky是相对定位和固定定位的结合，适用于scroll事件监听。当元素距离其父元素达到指定距离时，它会固定在屏幕相应位置。例如，一个元素在滚动20px后会固定在窗口。此属性不兼容IE浏览器。

摘要由CSDN通过智能技术生成

position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

例如：

主要代码：

position: sticky;
position: -webkit-sticky;
top: 20px;

全部代码

<!DOCTYPE html>
<html>
<head>
	<title>flex</title>
	<style type="text/css">
		.box{
			width: 800px;
			margin: 0px auto;
			height: 2000px;
			background-color: #ccc;
		}
		.left{
			width: 50px;
			height: 100px;
			position: sticky;
			position: -webkit-sticky;
			background-color: red;
			float: left;
			margin-left: -50px;
			margin-top: 200px;
			top: 20px;
		}
	</style>
</head>
<body>

<div class="box">
	<div class="left"></div>
</div>
</body>
</html>