面试官:介绍一下CSS定位?absolute和relative分别依据什么定位?
能说服一个人的,从来不是道理,而是南墙。
一、position属性介绍
取值 | 名称 | 效果 |
static | 静态定位(默认值) | 元素按照标准流布局 (不脱标) , top、bottom、left 、right等属性不起作用 |
relative | 相对定位 | 元素按照标准流布局 (不脱标) ,可以通过top、bottom、left 、right进行定位,定位参照对象是自身在标准流布局中的位置 |
absolute | 绝对定位 | 元素脱离标准流 (脱标) ,可以通过top、bottom、left 、right进行定位,定位参照对象是最邻近的祖先定位元素, 如果找不到这样的父级元素,参照对象是视口。 定位元素(positioned element),position值不为static的元素, 也就是position值为relative、absolute、fixed的元素 |
fixed | 固定定位 | 元素脱离标准流 (脱标) ,可以通过top、bottom、left 、right进行定位,定位参照对象是视口(viewport), 当画布(canvas)滚动时,固定不动 |
sticky | 粘性定位 | 可以看做相对和固定定位的结合体;它允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点; 当达到这个阈值点时, 就会变成固定定位; sticky是相对于最近的滚动祖先包含视口 |
1. 标准流(Normal Flow)
默认情况下,元素都是按照normal flow(标准流、常规流、正常流、文档流)进行排布的。
- 排布顺序:在浏览器中从左到右,从上到下顺序摆放;
- 默认情况下,元素互相之间不存在层叠现象;
2. position: sticky;
又称为粘性定位,是css3新增的。
粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进行偏移。
粘性定位可以被认为是相对定位和固定定位的混合
元素在跨越特定位偏移之前为相对定位,之后为固定定位。
示例:
.div{ position: sticky; top: 50px; }
设置了以上元素,在屏幕范围(viewport)视口滚动到元素top距离小于50px之前,div为相对定位。之后元素将固定在与顶部距离50px的位置,直到viewport视口回滚到50px以内。
特点:
- 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量
- 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了 top:50px; ,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
- 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
二、定位元素特点
- 1.可以设置宽高(不管是块级元素还是行内元素)
- 2.宽高默认由内容撑开
- 4.不再给父元素汇报宽高数据
- 5.脱标元素内部默认还是按照标准流布局
三、定位相关属性——z-index
z-index 属性 z : z轴; index : 指数;
x 轴代表水平方向,y 轴代表垂直方向,z 轴则代表我们的目光向页面(屏幕)看进去
z-index根据指数,设置元素在z轴上的层叠顺序(仅对定位元素有效)
取值可以是正整数、负整数、0;值越大,元素就离我们“越近”,值越小,元素自然也就离我们“越远”;
默认值为auto;
比较规则
兄弟关系
z-index越大,层叠在越上面
z-index相等,写在后面的那个元素层叠在上面
非兄弟关系
各自从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值
四、常见使用技巧
1.子绝父相
在绝大数情况下,子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用解决方案是:
父元素设置position: relative(让父元素成为定位元素,而且父元素不脱离标准流)
子元素设置position: absolute
简称为“子绝父相”
2.绝对定位元素居中显示
绝对定位元素(absolutely positioned element)
——position取值为absolute或者fixed的元素
对于绝对定位元素来说,
定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性 left: 0、right: 0、top: 0、bottom: 0、margin:0
如果希望绝对定位元素在定位参照对象中居中显示,可以给绝对定位元素设置以下属性 left: 0、right: 0、top: 0、bottom: 0、margin: auto另外,还得设置具体的宽高值(宽高小于定位参照对象的宽高)
五、各定位属性区别
脱离标准流 | 定位元素 | 绝对定位元素 | 定位参照对象 | |
static 静态定位 | × | × | × | × |
relative 相对定位 | × | √ | × | 元素自身在标准流中的位置 |
absolute 绝对定位 | √ | √ | √ | 最邻近的定位祖先元素(如果找不到这样的祖先元素,参照对象是视口) |
fixed 固定定位 | √ | √ | √ | 视口 |
六、定位使用场景
定位带来的元素层叠性,经常用于一些特殊样式中。
(1)遮罩层 mask / cover
(2)网页挂件 pendant / widget (部分信息屏蔽处理)
(3)stick粘性头部导航
七、应答面试官
面试官:说一下定位?absolute和relative分别依据什么定位?
你:
1.relative依据自身定位
2.absolute依据最近一层的定位元素定位
定位元素——position属性值为absolute、relative、fixed的元素
如果没有父级元素都不是定位元素,则依据body
推荐阅读
-
面试官:介绍一下CSS定位?absolute和relative分别依据什么定位?
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享,主题为「敏捷需求挖掘和组织方法,交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验,完成了企业多个团队从传统模式到敏捷转型的落地和实施,积淀了很多的经验。 这次分享主要包含以下2个部分: 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis(以下简称EDBA) 用户影响地图,是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题,比如大家使用不同的业务语言、技术语言,造成角色间的沟通阻碍,还会导致一些问题,比如需求误解、需求传递错误等;这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间,研发人员必须要将这些需求实现交付,他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案,需要把它实现,但没有和业务侧一起去思考解决方案是否正确,能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设,也就是功能需求。首先把它先实现,再逐步去验证我们每一个小目标是否已经实现,再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题,我们如何避免?先简单介绍做敏捷转型的常规思路: 先做团队级的敏捷,首先把产品、开发、测试人员,还有一些更后端的人员比如交互运维的同学放在一起,组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的,第一层是业务需求,在这个层级是以用户目标和业务目标作为输入进行规划,同时需要去考虑客户的诉求。业务人员通过获取到的业务需求,进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元,它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能,它是我们集成和测试的对象,也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队,映射到迭代计划会上要把它分解为相应的技术任务,包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来,形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程,最后生产。另外产品需求包含了操作流程和业务规则,具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图,在敏捷江湖上其实有一个传说,大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉,在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前,先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后,用户故事地图才去梳理我们整个的业务工作流,以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题,我们包括以下这些: 首先是范围蔓延,我们在整张地图上,功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上,那大家都有不同想法些立场,会提出很多需求(正确以及错误的需求)。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求,比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话,就需要降低优先级或弃掉。另外,通常我们去制定解决方案的时候,会考虑较完美的实现,导致解决方案括很多的功能。这个时候关键目标至关重要,会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构: 第一层why,你的业务目标哪个是最重要的,为什么?涉及到的角色有哪些? 第二层how ,怎样产生影响?影响用户角色什么样的行为? (不需要去列出所有的影响,基于业务目标) 第三层what,最关键的是在梳理需求时不需一次把所有细节想全,这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图,业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的,specific非常的具体,miserable 是可以衡量的,action reoriented是面向活动的, real list 也是很实际的。 量化的目标会指引我们接下来的行动,梳理一个业务目标,尽量去量化,比如 :我们通过打造一条什么样的流水线,能够提高整个部署的效率,时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图, how 层级识别出来的内容,客服角色:想要对它施加的影响,把客户引导到论坛上,帮助客户更容易的跟踪问题,更快速的去定位问题。初级用户:方论坛上找到问题。高级用户:在论坛上回答问题。通过我们这些用户角色,进行活动,完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级,才是我们日常接触比较多的真正的功能的特性和需求,比如引导到客户到论坛上,其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付,在每个迭代之前做进一步的梳理,细化成相应的用户故事。 这个是云智慧团队中,自己做的影响地图的范例,可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为: