最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

信息:CSS相对定位3大应用场景5个实战应用案例详解

来源:博客园

昨天发布的margin的5个重难点,受到了很多粉丝们的关注和收藏。我发现,作为学习Web前端开发的同学最大的痛苦莫过于,学了一堆知识,但到了实际的应用开发中不知道如何灵活运用。今天决定再上一干货,一个个来讲清楚关于定位系列实际应用场景,先从相对定位position: relative;开始相对定位3大应用场景:微调元素位置、提升元素层级、作为绝对定位元素参考对象相对定位5个应用案例:搜索框、图文对齐、滑动动画、弹性菜单、柱形图

定位作为css中非常重要的一个知识点,在实际开发中那就像家常菜一样,时时都会出现,同时在面试中也是200%会被问到的。接下来我打算分几个章节,把相对、绝对、固定、粘性定位的应用场景和相关案例整理出来,这样对正在学习的同学就能更好的理解定位的真实用法,同时在实际企业前端项目开发中知道如何去使用。

首先我们来简单复习下相对定位相关知识点

相对定位:相对于自己本身正常位置进行定位,来改变位置


(资料图)

元素的位置通过(位置描述词):"left","top","right","bottom"属性进行调整位置。

属性值可以是正数,也可以是负数。

相对定位特性:

  • 相对自身位置进行位置调整
  • 元素的初始位置占据的空间会被保留
  • 相对定位元素不会对其它元素产生任何影响。
  • 自身的层级会提升半层。

相对定位3大应用场景

  • 相对定位用来微调元素自身的位置(案例1,2,3)
  • 提升自身的层级(案例4)
  • 相对定位元素,可以当做绝对定位的参考盒子(案例5)

1、文字或图标与文本框对不齐,可以通过相对定位来微调

2、文字中包含小图标时,达不到预期效果,需要微调位置来实现

3、鼠标滑动动画效果,可通过相对定位来微调位置实现

当鼠标滑动元素上,元素会向不同方向移动一定距离。我们可以通过给元素添加相对定位,然后鼠标滑上去的时候,通过修改top,tottom,left,right值来调整位置实现动画效果。

4、通过相对定位来提升元素的层级,实现菜单弹性动画效果

当鼠标滑动到对应的菜单项时,红色的小滑块会在文字的下方,缓慢的滑动到当前菜单的位置上。

5、相对定位元素,做为绝对定位元素的参考对象

这里的箭头和长方形柱子,都是相对于其父元素来进行绝对定位实现的。

为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《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天挑战学习计划,来自公众号!老师会邀请你进入学习,并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

关键词: 相对定位 学习计划 绝对定位