前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。
属性值 | 描述 |
relative 相对定位 | 相对于自身正常位置进行位置的调整 |
absolute 绝对定位 | 相对于其最近的定位的父元素进行位置调整。 |
fixed 固定定位 | 相对于浏览器窗口进行位置调整 |
sticky 粘性定位 | 是基于用户的滚动位置来定位。 |
固定定位
相对于浏览器窗口进行定位,其它与绝对定位的特性一致。
常见的应用有:楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局
粘性定位
当滚动的高度>元素与浏览器的高度时,会以fixed固定定位显示。
当滚动高度<元素与浏览器高度时,会以relative相对定位显示。
常见的应用有:吸顶盒导航,滚动吸附效果
这三个案例用都是用固定定位来控制其与浏览器位置。最难是楼梯式导航的js部分
频道内容
番剧内容
电影内容
国创内容
电视剧内容
- 频道
- 番剧
- 电影
- 国创
- 电视剧
这个效果中黑色的半透明遮罩层和弹出的视频都是相对于浏览器来固定定位的。弹出登录注册框的原理和这个是一样的。这里以相对较为复杂的视频弹窗效是为例来讲解。
顶部导航和左侧菜单相对于浏览器固定定位。右侧的内容区则自适应浏览器的宽度
由于粘性定义目前只有火狐和Safari浏览器支持,但是这种效果在实际企业开发中必用。所以我们通常会用JS来实现,以下是完整效果的源码。
为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《30天挑战学习计划》,内容如下:
HTML/HTML5,CSS/CSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通
共4大完整的项目开发 !一行一行代码带领实践开发,实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态,省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理,Markdown 记录学习笔记,包括真实大厂项目的开发标准和设计规范,命名规范,项目代码规范,SEO优化规范
从蓝湖UI设计稿 到 PC端,移动端,多端响应式开发项目开发
这些内容在《30天挑战学习计划》中每一个细节都有讲到,包含视频+图文教程+项目资料素材等。只为实力宠粉,真正一次掌握企业项目开发必备技能,不走弯路 !
过程中【不涉及】任何费用和利益,非诚勿扰 。
如果你没有添加助理老师微信,可以添加下方微信,说明要参加30天挑战学习计划,来自头条号!老师会邀请你进入学习,并给你发放相关资料
30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程
页面更新:2024-03-14
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号