CSS固定定位与粘性定位4大企业级案例

　　前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。
　　属性值
　　描述
　　relative相对定位
　　相对于自身正常位置进行位置的调整
　　absolute绝对定位
　　相对于其最近的定位的父元素进行位置调整。
　　fixed固定定位
　　相对于浏览器窗口进行位置调整
　　sticky粘性定位
　　是基于用户的滚动位置来定位。
　　固定定位
　　相对于浏览器窗口进行定位，其它与绝对定位的特性一致。
　　常见的应用有：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局
　　粘性定位当滚动的高度元素与浏览器的高度时，会以fixed固定定位显示。
　　当滚动高度元素与浏览器高度时，会以relative相对定位显示。
　　常见的应用有：吸顶盒导航，滚动吸附效果1、楼梯式导航、浏览器右侧菜单、底部通栏（固定定位应用）
　　这三个案例用都是用固定定位来控制其与浏览器位置。最难是楼梯式导航的js部分
　　stylebody，ul，li｛margin：0；padding：0；｝。header，。footer｛height：200backgroundcolor：｝。container｛width：1280margin：20｝。container。item：nthchild（odd）｛height：600backgroundcolor：｝。container。item：nthchild（even）｛height：700代码来自艾编程清心backgroundcolor：｝ul。louti｛liststyle：width：100padding：0px10border：1borderradius：10backgroundcolor：position：通过固定定位来控制楼梯式导航的位置top：300left：50｝ul。loutili｛height：30lineheight：30textalign：borderbottom：1cursor：｝ul。loutili：lastchild｛border：｝ul。loutili。current｛backgroundcolor：color：｝stylebody频道内容番剧内容电影内容国创内容电视剧内容ulclasslouti！楼梯式导航固定定位liclasscurrent频道lili番剧lili电影lili国创lili电视剧liulbody2、视频弹窗播放效果（固定定位应用）
　　这个效果中黑色的半透明遮罩层和弹出的视频都是相对于浏览器来固定定位的。弹出登录注册框的原理和这个是一样的。这里以相对较为复杂的视频弹窗效是为例来讲解。
　　style。video｛width：300height：200｝。videoimg｛width：100；height：100；objectfit：cursor：｝。mask｛backgroundcolor：rgba（0，0，0，0。5）；position：top：0bottom：0left：0right：0display：｝。maskvideo｛position：left：50；top：50；transform：translateX（50）translateY（50）；｝stylebody！视频播放列表！datasrc放着对应的视频地址imgsrcc2021imgdataimg。jpgdatasrcimagesmz8。jpgdatasrcimgq01。71396。combllh3b92d36c31184180。jpgvideo！黑色半透明遮罩层videosrcc2021imgdataimg。jpgdatasrccontrolswidth70video！视频body3、左边和顶部固定，右自适应后台管理界面布局
　　（固定定位应用）
　　顶部导航和左侧菜单相对于浏览器固定定位。右侧的内容区则自适应浏览器的宽度stylebody｛margin：0；｝。top｛height：100position：固定定位要实现水平自适应，就不要加宽left：10right：10top：0backgroundcolor：borderradius：10｝。siderbar｛width：250position：固定定位要实现垂直自适应，就不要加高left：10top：110bottom：10backgroundcolor：borderradius：10｝。main｛margin：110px10px0px270水平自适应，不要加宽minheight：900backgroundcolor：｝stylebody！顶部！左侧边栏！主内容区body4、吸顶盒导航和常见左右吸附效果（粘性定位）
　　由于粘性定义目前只有火狐和Safari浏览器支持，但是这种效果在实际企业开发中必用。所以我们通常会用JS来实现，以下是完整效果的源码。
　　stylebody｛margin：0；minwidth：1280｝。top｛height：70width：100；backgroundcolor：000；｝。header｛height：100width：100；backgroundcolor：position：兼容问题position：top：0；textalign：lineheight：100｝。container｛width：1280margin：20｝代码来自艾编程清心。container。main｛width：1000minheight：2000backgroundcolor：float：｝。container。siderbar｛width：250float：｝。container。siderbar。item｛height：200backgroundcolor：marginbottom：20｝。container。siderbar。ceiling｛height：200width：250backgroundcolor：position：position：｝stylebody！吸附块！吸附块body
　　为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
　　HTMLHTML5，CSSCSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通PC端项目开发（1个）移动WebApp开发（2个）多端响应式开发（1个）
　　共4大完整的项目开发！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
　　从学习一开始就同步使用Git进行项目代码的版本的管理，Markdown记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
　　从蓝湖UI设计稿到PC端，移动端，多端响应式开发项目开发真机调试，云服务部署上线；Linux环境下的Nginx部署，Nginx性能优化；Gzip压缩，HTTPS加密协议，域名服务器备案，解析；企业项目域名跳转的终极解决方案，多网站、多系统部署；使用使用Git在线项目部署；
　　这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频图文教程项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路！
　　过程中【不涉及】任何费用和利益，非诚勿扰。
　　如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条号！老师会邀请你进入学习，并给你发放相关资料
　　30天挑战学习计划Web前端从入门到实战arry老师的博客艾编程