详解position:sticky
今天被人问到position:sticky的使用,由于css这块特效做的不多.深知自己的短板.于是痛定思痛.决定好好积累遇到的css问题
先说一下sticky这个属性的定义
sticky:
元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top
, right
, bottom
, 和 left
的值进行偏移。偏移值不会影响任何其他元素的位置。
MDN是这么解释的.专业性有点强,可能不太好理解.但如果说它的最长的用途,大家都知道,那就是吸顶固定.
就是下面这个效果
该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow
是 hidden
, scroll
, auto
, 或 overlay
时),即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为(详情见Github issue on W3C CSSWG)。
简单说,就是在一个滚动的容器里,将一个子元素设置为postion:sticky 在元素显示在视口中时,显示的效果与relative 一致
当元素被滑动出视口外是,显示效果与fixed一致
详解position:sticky相关推荐
- css详解position五种属性用法及其含义
position(定位) position - 作为css属性三巨头(position.display.float)之一,它的作用是用来决定元素在文档中的定位方式.其属性值有五种,分别是 - stat ...
- css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
- css规则中区块block,CSS 定位详解
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position position 属性的作用 position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即posi ...
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- 详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
- Kooboo CMS - Html.FrontHtml.Position 详解
DataContract 数据契约 http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html https://msdn.micr ...
- CSS中position详解与常见应用实现
在web前台开发时候,我们必不可少的会用到postion属性进行布局定位. 今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在C ...
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
- z-index失效的几种情况,父标签position属性为relative的时候,详解
网上对这一方面解释的很多,我也不想把别人的抄过来.在这里是加上我对这些情况的理解还有我的一些疑惑,若有问题,请留言,谢谢!!!话不多说,进入正题: 文章重点:z-index失效的一类情况:父标签pos ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
最新文章
- NLP jieba分词源码解析
- 阿里云中间件团队首次解密企业级分布式应用服务EDAS
- 小甲鱼python学习笔记1
- 微正指纹识别算法MZFinger5.0
- 使用给定的整数n,编写一个程序生成一个包含(i, i*i)的字典,该字典包含1到n之间的整数(两者都包含)。假设向程序输入:5则输出为:{1:1, 2:4, 3:9, 4:16, 5:25}
- java 中的radix_Java Scanner radix()用法及代码示例
- 通过阅读饥荒代码理解树人机制
- 粗糙集理论应用的实例
- 安硕科技Java面试过程—(皇德耀世)
- NodeJs+VueJs +前端实现批量打印二维码
- linux 主流浏览器,各主流浏览器(PC、移动端)userAgent属性信息介绍
- Instagram养号:账号防封攻略
- matlab动态电路仿真,基于Simulink建立的RLC串联动态电路仿真模型
- 管壁式换热器cad图纸_换热器之列管式换热器
- 腾讯云技术公开课:公有云架构演进之路
- 大数据征信迎爆发时机 这几家企业或将率先破局
- wm命令(wm size)修改屏幕尺寸
- Linux 内核开发者完成了对所有来自 UMN.edu 补丁的审查
- 一款MVC5+EF+Bootstrap搭建的后台通用管理系统模板
- windows安装nmap_如何为Windows操作系统下载和安装Nmap?