CSS3新增定位属性sticky，粘性定位

最新推荐文章于 2024-04-10 15:25:41 发布

leo_neverGiveUp

最新推荐文章于 2024-04-10 15:25:41 发布

阅读量1.2k

点赞数 1

文章标签： css3 sticky 粘性定位 css定位属性

本文链接：https://blog.csdn.net/weixin_43915587/article/details/89044118

版权

position:sticky
sticky 英文字面意思是粘，粘贴。

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

什么是结合两种定位功能于一体呢？
元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

定位类型
定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素。
相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.sticky {
			position: sticky;
			position: -webkit-sticky;
			top: 0;
			padding: 5px;
			background-color: skyblue;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<p>尝试滚动</p>
	<p>尝试滚动</p>
	<div class="sticky">粘性定位</div>
	<div style="height: 1000px">
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
		<p>7</p>
		<p>8</p>
		<p>9</p>
		<p>10</p>
	</div>
</body>
</html>

leo_neverGiveUp

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增定位属性sticky，粘性定位

position:stickysticky 英文字面意思是粘，粘贴。这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。什么是结合两种定位功能于一体呢？元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素...
复制链接

扫一扫