css position: sticky粘性定位

最新推荐文章于 2024-01-01 14:36:58 发布

352328759

最新推荐文章于 2024-01-01 14:36:58 发布

阅读量2k

点赞数 1

分类专栏：冷知识 css 介绍

本文链接：https://blog.csdn.net/u013970232/article/details/104692520

版权

本文介绍了CSS新属性`position: sticky`，用于实现类似固定定位的效果，特别是创建固定顶部的功能。`sticky`定位只对最近的滚动环境有效，并且可以在中间节点中保持定位，但其行为可能复杂。它支持横向和纵向定位，可以多层嵌套，并且TRBL至少需要一个，负值也允许。虽然兼容性已较好，但在手机端可能存在意外情况，使用时需谨慎考虑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近认识到position: sticky;这个比较新的css属性.功能就如字面意思
定位: 粘性;
用这个新属性做固定顶部的功能,简直是湿湿碎

作为新属性,简单介绍下它的特性:

只对最近一个的滚动环境有效
没有滚动环境最后会冒泡到视图窗口,与其它position类似
与最近一个的滚动环境之间可以有其它中间节点
在中间节点里,定位也能有效,但受中间节点影响,影响规律不明
定位是相对于最近的滚动节点,而不是position节点.在触发前,相当于只设了position: relative,TRBL未设置;
横向纵向有效
可以多层套用
TRBL 至少有一个,可以多个,值可以负数
TRBL 的数值冲突的话,left比 right 优先;top比bottom优先

实践出真知,实际用一下就知道怎么回事

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

		<title>position: sticky粘性定位</title>

		<style type="text/css">
			* {
    
				outline: 1px solid #000;
				padding: 10px;
				background: #eee;
			}
			
			.box1 {
    
				float: left;
				height: 360px;
				width: 360px;
				overflow: auto;
			}
			
			.box2 {
    
				white-space: nowrap;
				height: 360px;
				width: 360px;
				overflow: auto;
			}
			
			._sticky {

最低0.47元/天解锁文章