position粘性定位sticky

这两周在做一个service后台的需求，有一个很有意思的事情，左侧要有各种颜色柱，每一种颜色柱代表一个身份，例如红色代表本人，蓝色代表配偶，绿色代表女儿等等。。。需求中要求要在内容区域滚动的时候，代表身份的本人两字一直跟随着左侧导航栏移动，始终在导航栏的下方，在左侧色柱滑动。图如下:

发现了css定位的sticky ，对于css重新进行了认识

发现position不止有常用的static、relative、absolute和fixed ，还有一些有意思的例如sticky

static：静态定位

　　　　默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative ：相对定位

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute：绝对定位

　　　　生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　　　元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed：固定定位

　　　　生成绝对定位的元素，相对于浏览器窗口进行定位。

　　　　元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

inherit：

　　　　规定应该从父元素继承 position 属性的值。

unset：

　　　　当前属性可继承则继承

initial：

　　　　设置该属性为默认值

最后说一下sticky ——粘性定位这个磨人的小妖精

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

一开始并不是所有的浏览器都支持，后来发现现在居然支持了。。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

sticky 可以用来粘住任何一个你想要的元素，是一个特别有意思的属性，可以省下很多功夫。有空可以来尝试一下，真的很有意思。

转载于:https://www.cnblogs.com/katydids/p/11172391.html

position粘性定位sticky相关推荐

position:sticky 粘性定位 (sticky) 与固定定位
position:sticky是css定位新增属性:可以说是static(没有定位) 和固定定位fixed 的结合:它主要用在对 scroll 事件的监听上:简单来说,在滑动过程中,某个元素距离其父 ...
关于CSS粘性定位——sticky
背景最近在做项目迁移,因为技术不同,导致某些功能的问题需要手动解决:如何在居位在主体区域底部不随内容而滚动: OK进入正体这期分享的是CSS粘性定位属性sticky来解决上面的问题粘性定位: 粘性 ...
CSS粘性定位(sticky)
原理元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位.(relative) 元素定位在跨越特定阈值后为固 ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
定位（定位组成【定位模式（静态定位，相对定位，绝对定位，固定定位，粘性定位，定位总结），位偏移】，）
定位定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子定位也是用来布局的,它有两部分组成: 定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的 ...
粘性定位之 position:sticky
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景. 即元素先按照普通文档流定位,之后为固定定位,常规用法大概是监听 ...
position:sticky粘性定位的几种巧妙应用与理解。
一.粘性布局的定义 position:sticky又称为粘性定位,是css3新增的.粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进 ...
彻底理解粘性定位（position：sticky）
粘性定位可以被认为是相对定位和固定定位的混合(即元素子再跨越特定阈值前为相对定位,之后为固定定位)例如: .div{position: sticky;top: 10px; } 在视口滚动到元素 to ...
position:sticky 粘性定位
1.什么是粘性定位? 粘性定位它基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换. 它的行为就像 p ...

position粘性定位sticky

position粘性定位sticky相关推荐

最新文章

热门文章