粘性固定属性 -- position:sticky
2024-08-31 09:00:46
概述
position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合。
用法
默认情况下,其表现为relative,在视窗与设置了该属性的元素之间,达到或超过其预设的 top、bottom、left、right,本属性会转变成 fixed,使 sticky 固定。
例如:
.menu{
position:sticky;
top: 0px;
}
例子中,设置 top 为 0,会表现为,页面滚动至 menu 的顶端时,menu 变为 fixed 固定在页面上方,效果如下:
生效条件
1. 父元素无论如何设置,必须表现为 visible 效果(注意 unset、auto、inherit、initial)
2. 必须设置 top、bottom、left、right 4个值之一,否则只会处于相对定位
3. 父元素的高度不能低于 sticky 元素的高度
4. sticky 元素仅在其父元素内生效
5. 注意 sticky 元素的位置,比如它如果在父元素最下方,那么其 top、bottom 可能会失效
兼容性(2019.4.15)
最新文章
- ios移动端部分手机不支持background-attachment: fixed 的解决办法
- springmvc下上传文件
- NDK
- chrome开发配置(一)安装配置工具
- ASP.NET MVC 教程汇总
- FireFox不支持InnerText的解决方法
- 剖析@weakify 和 @strongify
- 高清摄像头MIPI接口与ARM处理器的连接
- 一些CSS命名规则
- Java面试题之五
- Vue 子组件无法使用 $emit 向父组件传参
- dos命令的小总结
- mac对比class文件
- SDN第5次上机作业
- cocos2d-x-3.x 学习总结(一)
- 转:visualvm监控远程机器上的Java程序
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染
- loadrunner-关联
- oracle substr函数
- Python语言的高级特性
热门文章
- Css问题 margin float 文档流 背景图底部充满
- 更换WordPress编辑器为TinyMCE Advanced
- 23个Python爬虫开源项目代码:爬取微信、淘宝、豆瓣、知乎、微博等
- phpstudy不显示目录列表---设置方法
- jQuery添加新的元素
- Spring AOP 介绍与基于接口的实现
- Codeforces Round #468 (Div. 2, based on Technocup 2018 Final Round)D. Peculiar apple-tree
- python类的内置attr属性
- ACM成长之路
- Python面向对象----多态和鸭子类型