css粘性定位position:sticky
本文共 640 字，大约阅读时间需要 2 分钟。
欢迎点击:
介绍：position:sticky可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件： 1、父元素不能overflow:hidden或者overflow:auto属性。 2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 3、父元素的高度不能低于sticky元素的高度 4、sticky元素仅在其父元素内生效
sticky运用案例:，以及一些商城的头部导航栏固定
缺点：对IE不是很友好，兼容一般般
简单demo:
demo代码 主题部分
主题部分
主题部分
主题部分
主题部分
主题部分
主题部分
主题部分
主题部分
主题部分
转载地址：http://cmctz.baihongyu.com/
你可能感兴趣的文章
16 python基础-恺撒密码
查看>>
06.1 python基础--结构控制
查看>>
Frame--Api框架
查看>>
Frame--WEB框架
查看>>
idea 在Debug 模式中运行语句中函数的方法
查看>>
eclipse“SVN检出”遇到问题 error getting dir list 的解决办法
查看>>
springboot2.1.1开启druid数据库连接池并开启监控
查看>>
vscode bash-4.3$ bash:git: command not found问题处理
查看>>
《朝花夕拾》金句摘抄（五）
查看>>
《朝花夕拾》金句摘抄（六）
查看>>
Boostrap技能点整理之【网格系统】
查看>>
新闻发布项目——业务逻辑层（UserService）
查看>>
新闻发布项目——后台JSP界面adminManage/modifyCategory.jsp
查看>>
hibernate正向生成数据库表以及配置——hibernate.cfg.xml
查看>>
javaWeb服务详解（含源代码，测试通过，注释） ——Emp的Dao层
查看>>
java实现人脸识别源码【含测试效果图】——Dao层（IUserDao）
查看>>
使用ueditor实现多图片上传案例——前台数据层（Index.jsp）
查看>>
ssh(Spring+Spring mvc+hibernate)——Dept.hbm.xml
查看>>
ssh(Spring+Spring mvc+hibernate)——updateEmp.jsp
查看>>
ssm(Spring+Spring mvc+mybatis)——saveDept.jsp
查看>>