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

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>

CSS3新增定位属性sticky，粘性定位相关推荐

position:sticky 粘性定位 (sticky) 与固定定位
position:sticky是css定位新增属性:可以说是static(没有定位) 和固定定位fixed 的结合:它主要用在对 scroll 事件的监听上:简单来说,在滑动过程中,某个元素距离其父 ...
position:sticky 粘性定位
1.什么是粘性定位? 粘性定位它基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换. 它的行为就像 p ...
position:sticky粘性定位的几种巧妙应用与理解。
一.粘性布局的定义 position:sticky又称为粘性定位,是css3新增的.粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进 ...
CSS position: sticky; 粘性定位初识
之前所熟知的CSS position 属性值有relative.absolute.fixed,当然也不能忽略了static(默认)和inherit(继承). 偶然的一次在 MDN:https://d ...
html的定位属性,CSS之定位属性
一,定位介绍定位的基本思想很简单,它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实现的. 二,定位类别 1.相对定位相对定位就是相对于自己以前在 ...
css3新增的属性和用法
css3 就是css第3个版本增加了一些选择器,布局,动画,背景,新盒模型,私有前缀. 选择器表单选择器 :focus 聚焦选择器选择的是当下被聚焦的表单元素 input:focus {} :c ...
什css3新增的属性,CSS
1.文本阴影属性 text-shadow:10px 10px 10px red; 注: 第一个值 : 水平方向的距离 (必须有的:支持负值) 第二个值 : 垂直方向的距离 (必须有的:支持负值) 第三 ...
（17）css3新增背景属性
一.背景半透明 CSS3支持背景半透明的写法,颜色值增加了一种 rgba 模式. rgba 模式:在 rgb基础上增加了一个不透明度的设置,不透明度 alpha 取值范围在 0-1 之间,0 表示完全 ...
css3新增动画属性（过度动画变形动画关键帧动画）
目录过度动画transition 多属性值过渡 2d变形transform 平移应用:实现居中(不要求知道盒子的宽高) 缩放旋转倾斜修改变形中心的属性变形属性的复合写法 3D变形动画 3d ...

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

CSS3新增定位属性sticky，粘性定位相关推荐

最新文章

热门文章