CSS相对定位3大应用场景5个实战应用案例详解
昨天发布的margin的5个重难点,受到了很多粉丝们的关注和收藏。我发现,作为学习Web前端开发的同学最大的痛苦莫过于,学了一堆知识,但到了实际的应用开发中不知道如何灵活运用。今天决定再上一干货,一个个来讲清楚关于定位系列实际应用场景,先从相对定位position: relative;开始相对定位3大应用场景:微调元素位置、提升元素层级、作为绝对定位元素参考对象相对定位5个应用案例:搜索框、图文对齐、滑动动画、弹性菜单、柱形图
![](https://p9.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/8a669c0e87f5499dba72b0399a65e8d9~tplv-tt-shrink:640:0.jpg)
定位作为css中非常重要的一个知识点,在实际开发中那就像家常菜一样,时时都会出现,同时在面试中也是200%会被问到的。接下来我打算分几个章节,把相对、绝对、固定、粘性定位的应用场景和相关案例整理出来,这样对正在学习的同学就能更好的理解定位的真实用法,同时在实际企业前端项目开发中知道如何去使用。
首先我们来简单复习下相对定位相关知识点
相对定位:相对于自己本身正常位置进行定位,来改变位置
元素的位置通过(位置描述词):"left", "top", "right" ,"bottom"属性进行调整位置。
属性值可以是正数,也可以是负数。
![](https://p3.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/f5ecda0288064386ba0892bd453eca98~tplv-tt-shrink:640:0.jpg)
相对定位特性:
- 相对自身位置进行位置调整
- 元素的初始位置占据的空间会被保留
- 相对定位元素不会对其它元素产生任何影响。
- 自身的层级会提升半层。
相对定位3大应用场景
- 相对定位用来微调元素自身的位置(案例1,2,3)
- 提升自身的层级(案例4)
- 相对定位元素,可以当做绝对定位的参考盒子(案例5)
1、文字或图标与文本框对不齐,可以通过相对定位来微调
![](https://p26.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/eb445b76a5944221981c42ab0eb11cd2~tplv-tt-shrink:640:0.jpg)
![](https://p26.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/d52170e479e542ec805c73b007b75393~tplv-tt-shrink:640:0.jpg)
2、文字中包含小图标时,达不到预期效果,需要微调位置来实现
![](https://p26.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/95ad48a13dbd45f2a6deca15ffca781e~tplv-tt-shrink:640:0.jpg)
3、鼠标滑动动画效果,可通过相对定位来微调位置实现
当鼠标滑动元素上,元素会向不同方向移动一定距离。我们可以通过给元素添加相对定位,然后鼠标滑上去的时候,通过修改top,tottom,left,right值来调整位置实现动画效果。
![](https://p3.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/bc84d174cf5e4c4f8cc7ad543bcfb8bb~tplv-tt-shrink:640:0.jpg)
4、通过相对定位来提升元素的层级,实现菜单弹性动画效果
当鼠标滑动到对应的菜单项时,红色的小滑块会在文字的下方,缓慢的滑动到当前菜单的位置上。
![](https://p26.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/eb9710ec2ceb4ab08425e1885181c159~tplv-tt-shrink:640:0.jpg)
![](https://p26.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/2c14cf1aa6d74adc9c50568a75230bbe~tplv-tt-shrink:640:0.jpg)
5、相对定位元素,做为绝对定位元素的参考对象
这里的箭头和长方形柱子,都是相对于其父元素来进行绝对定位实现的。
![](https://p6.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/0758796cf4c848aa91d0b96cb5793af1~tplv-tt-shrink:640:0.jpg)
![](https://p6.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/965c9ee68591456ba9acc059d95d52f7~tplv-tt-shrink:640:0.jpg)
![](https://p6.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/a36bc7f03ec94d47addc1ec43029ac20~tplv-tt-shrink:640:0.jpg)
为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《30天挑战学习计划》,内容如下:
HTML/HTML5,CSS/CSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通
- PC端项目开发(1个)
- 移动WebApp开发(2个)
- 多端响应式开发(1个)
共4大完整的项目开发 !一行一行代码带领实践开发,实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态,省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理,Markdown 记录学习笔记,包括真实大厂项目的开发标准和设计规范,命名规范,项目代码规范,SEO优化规范
从蓝湖UI设计稿 到 PC端,移动端,多端响应式开发项目开发
- 真机调试,云服务部署上线;
- Linux环境下 的 Nginx 部署,Nginx 性能优化;
- Gzip 压缩,HTTPS 加密协议,域名服务器备案,解析;
- 企业项目域名跳转的终极解决方案,多网站、多系统部署;
- 使用 使用 Git 在线项目部署;
这些内容在《30天挑战学习计划》中每一个细节都有讲到,包含视频+图文教程+项目资料素材等。只为实力宠粉,真正一次掌握企业项目开发必备技能,不走弯路 !
过程中【不涉及】任何费用和利益,非诚勿扰 。
如果你没有添加助理老师微信,可以添加下方微信,说明要参加30天挑战学习计划,来自公众号!老师会邀请你进入学习,并给你发放相关资料
相关文章
- Windows 技术篇-win10总是提示“目前无法访问 SmartScreen”问题解决方法,关闭“目前无法访问 SmartScreen”电脑提示方法演示
- Android应用中是怎么调用系统相册中的照片的
- Figma组件和自动布局的应用(三)
- 今晨,微软亮出了自己的“野心”
- 微软让草稿几秒钟变App,还推出了个像Mac Mini的迷你台式机
- 开发者对区块链应用、加密货币和NFT学习热情最高
- 开源应用性能监控系统是什么?是否有必要使用?
- 哪里有服务好的应用性能监控 监控告警的途径有哪些?
- 哪里有自动的应用性能监控?具有哪些特点?
- T资讯 | 微软宣布给员工涨薪应对通胀、抖音及 TikTok 4 月全球应用收入第一,超 2.96 亿美元
- 如何选择好的应用性能监控 服务器监控要监控哪些领域
- 什么是场景化应用性能监控平台?如何选择性能监控平台?
- 什么是高性能的应用性能监控?能够帮助应用维稳?
- 什么是容器化应用性能监控?哪种容器化应用性能监控好?
- 什么是移动端应用性能监控?具有哪些成本特性?
- 什么是应用性能监控与分析软件?具有哪些功能?
- 腾讯云应用性能监控是什么?具有哪些优点?
- 移动应用性能监控是什么?其功能是什么?
- 应用性能监控的服务水平如何?应用性能监控系统是否值得?
- 应用性能监控的四大优势 企业可以用它做什么