position 有哪些取值?各取值的意义分别是什么?
我上个月面了 5 个人,全都答得不准确。
所谓准确就是把各取值相对谁定位说清楚。
- 有人不知道除了 fixed absolute relative 还有哪些取值。
- 有人不知道 fixed 相对什么定位。(知道但是说不出名字)
- 答错最多得还是 absolute 相对谁定位。
这反映出大部分新人根本不看标准或者定义,直接用,我只能说你们很勇敢。
注:标题党了, 80% 是我的个人经验,实际应该更高 lol 。

position 有哪些取值?各取值的意义分别是什么?
我上个月面了 5 个人,全都答得不准确。
所谓准确就是把各取值相对谁定位说清楚。
这反映出大部分新人根本不看标准或者定义,直接用,我只能说你们很勇敢。
注:标题党了, 80% 是我的个人经验,实际应该更高 lol 。
1 leojoy710 Aug 17, 2015 我的经验是...css 大部分属性...稍微问深一点都能难倒一片... |
2 FrankFang128 OP @leojoy710 不问深,就问定义,就全瞎。 |
3 edisonator Aug 17, 2015 我的经历是 absolute 答得出相对谁定位的反而最少 |
4 romoo Aug 17, 2015 上面刚面试一位同学不知道 absolute 相对谁定位。。。 |
5 FrankFang128 OP @romoo 能说上来我就要,哈哈 |
6 romoo Aug 17, 2015 @FrankFang128 可惜很多人只知道相对 relative 定位 |
7 yushiro Aug 17, 2015 via iPhone 问题是,这个 position 难道面试的人平时都不用?随便谁,只要是写前端有过一定时间的,肯定会遇到 absolute 相对于谁定位的问题啊。 或者现在写前端的都是用各种 framework ?规避了这些基础? |
8 FrankFang128 OP @yushiro 他 /她们一般只知道 absolute 可以相对于祖先中的 relative 定位 |
9 ChiangDi Aug 17, 2015 这都不知道也敢去面前端? |
10 FrankFang128 OP @yushiro 然后在工作中也只用 relative > absolute 这一种模式。 |
11 a591826944 Aug 17, 2015 看了下定义。。果然跟我的认识有点差异。。。 我是后端 lol |
12 FrankFang128 OP @ChiangDi 这样的人很多,而且很多都是从不错的学校出来的…… |
13 ChiangDi Aug 17, 2015 相对 父级元素设了 position 并且不是 static 最近的那个 |
14 pepsin Aug 17, 2015 撞墙式编程嘛,这个不对换一个,一直到能成就好了。 对于 CSS 这种东西,这样搞其实也不能说有太大问题。尤其是撞的多了,也就有经验了,说可能说不上来,写可能都是一次过了。 |
15 ChefIsAwesome Aug 17, 2015 margin: auto; auto 的值在哪些情况下等于哪些值,你试试这个,看几个人会。 padding 的值可以是 auto 吗?你再问问,看看几个人说是。 |
16 cxe2v Aug 17, 2015 突然感觉前端好深奥 |
17 xmgit Aug 17, 2015 然而,大部分工作他们中的 80%都能胜任。 |
18 zythum Aug 17, 2015 absolute 相对谁定位确实挺考细节的... 下次放面试题当加分项。 |
19 sumhat Aug 17, 2015 会“茴”字的四种写法就很牛?来,楼主来默写一个 Int32 的最大值。 |
20 qinglangee Aug 17, 2015 因为计算机学校里偏后端, 前端都是学好后端基础稍微学一下, 只要效果对了根本不在乎其它. 或者设计,美工兼的,不是这个专业的. 不知道现在有没有开发一个前端专业 |
22 vitas Aug 17, 2015 - - 我是 UI ,偶尔帮前端做一些简单的页面.自学的. 有些取值怎么读都不知道~然而不影响我做出来的页面效果. 我觉得能做出东西来就行了吧 就像 UI 你用 ps 也好 sketch 也罢 能画出好 UI 才是硬道理 |
25 69 Aug 17, 2015 2 既然是 CSS 的工作,能「合理」的原的作品、以及交互效果才是最重要的; 其次才是 CSS 原理的理解,然些理解有助於更好的工作、在工作中碰更少的坑; 但是,如果一人本身有著不的工作能力,因的目就被否定,企也是一失,要知道,前端在大本身就有多少正式的授,基本都是靠自己摸索和自。 是目、是主容、或是主的,都太了。 |
26 tabris17 Aug 17, 2015 我做前端的时候还是 IE6 时代,我记得 position:fixed 的兼容性是有问题的,所以从来不用 |
27 qinglangee Aug 17, 2015 @raincious 哎哟,不错哦, 明天来上班 |
28 yangff Aug 17, 2015 其实这都不是问题…… 但是这样就是为什么,前端总会出现要一个一个浏览器适配过去的情况…… |
29 FrankFang128 OP @69 面试就像应试,必然有这个缺点 |
30 FrankFang128 OP @tabris17 现在已经不是 IE 6 时代了,如果现在还在学习陈旧的知识,说明知识获取渠道太陈旧(只会用百度) |
31 66beta Aug 17, 2015 楼主提供一台电脑,用 google 查找出答案的就留下吧 :) |
32 FrankFang128 OP @66beta 自带 VPN/Shadowsocks 的加分。 |
34 raincious Aug 17, 2015 @FrankFang128 说真的我原先也没想起来除了 fixed 、 absolute 、 relative 之外还有什么其他的值,于是我搜了下,发现还有一个 static ,然后,我突然想起来那不是默认值么……也难怪。(当然还有 inherit 和 initial 这两个公有的) 如果一个值不经常使用的话,的确会渐渐生疏。 > 这反映出大部分新人根本不看标准或者定义,直接用,我只能说你们很勇敢。 我倒是同意,因为我自己遇到的很多坑都是因为不熟悉标准和定义(里的坑)所以掉进去的。 但: > @tabris17 现在已经不是 IE 6 时代了,如果现在还在学习陈旧的知识,说明知识获取渠道太陈旧(只会用百度) 这个我倒是不敢苟同了。因为这仅仅只是保守而已,不是说知识有什么问题。 一个合格的程序员应该保证他自己的程序能够在尽量多的兼容各种意外状况。 比如你在 Windows 下面写的代码,跑在 Linux 上就会遇到问题。在这种情况下,你就会想到用兼容性更好的函数 /库来替代操作系统提供的功能。比如微软自家的 MultiByteToWideChar 和开源的 strconv 就是这样的情况。 就 CSS 来说,想要最大限度的进行兼容,就需要避免使用在不同浏览器下会有差异的属性。 fixed 是其中之一。而且要注意, position 是控制布局的属性,如果出现了不兼容的情况,页面的布局就乱了,这样产品就不合格。所以开发人员倾向于避免使用 fixed 没啥问题,直到决策人员下决定说只需要兼容高于某个版本的浏览器,而那些浏览器完全是支持 CSS2 标准的。 |
35 yangg Aug 17, 2015 via iPhone 你知道 sticky 么 |
36 lijingyu68 Aug 17, 2015 前端做了两年了,同样答不上的路过。。。 |
37 edisonator Aug 17, 2015 哦,看错了你的第三条。 |
38 hbkdsm Aug 17, 2015 @FrankFang128 我来回答一下, position 属性设置为 absolute 的元素相对于离其最近的已定位祖先元素进行定位。若其祖先元素均非定位元素,则相对于初始包含块进行定位。 对否? |
39 FrankFang128 OP @lijingyu68 还好,我见过不会 CSS 的前端 |
40 clippit Aug 17, 2015 也许有人说,这些都是查文档查手册可以得到的,作为面试题太苛刻了。但是我觉得,这些真的都是前端的基本功啊,比如 position 的取值,比如画个盒模型,指一下 width 和 height 从哪儿到哪儿(这个也是我面试时经常能 fail 掉一大帮人的题目)。这样的基础知识,就相当于你在 C/Java/PHP 里面写一个 for 循环,括号里三段的含义是什么一样基础。你们会认为,在面试的时候,写不出 for 循环,然后通过查 Google 查到应该怎么写了,这样就可以过了? |
41 banri Aug 17, 2015 没看上面回复,没搜索资料,试试回答下 position inherit 继承,这个很多属性都有 static 默认值,占据文档流空间 relative 相对于 static 的位置定位,占据文档流空间 absolute 相对于第一个非 static 父元素定位,不占据文档流空间。如果所有父元素均为 static 值,则相对于 html 这个根元素定位。 html 本身也可以被 absolute 定位,它的参考物则是 viewport fixed 相对于 viewport 定位,不占据文档流空间 |
42 pepsin Aug 17, 2015 另外如果楼主觉得这样的人不好,那可能碰上一种上来就跟你讲 box 模型底层实现, webkit 背后渲染架构再跳回来跟你讲 CSS 的人,你可能也会被发一贴噢。 |
43 gongpeione Aug 17, 2015 @banri 看到这个问题就又去你博客看了遍 |
44 banri Aug 17, 2015 @gongpeione 树大触又黑窝! |
45 ileenhow Aug 17, 2015 现在快有 sticky 了 |
46 banri Aug 17, 2015 @banri 想起来还得补充一句, absolute 还得用 top/right/bottom/left 触发,不然还是会呆在原来的位置,不过表现形式和 static 不同 -w- |
47 otakustay Aug 17, 2015 看你面的啥人,我面过的人这个问题大概只有 20%的答不出 另外没说出 sticky 你算答错吗 |
48 FrankFang128 OP @otakustay 你们那么关心 sticky 干啥,还在草案阶段。以后说不定会变。 |
49 aivier Aug 17, 2015 不管懂不懂,反正我是做出来了→_→你看呢 需要用的时候自然会知道 |
50 jarlyyn Aug 17, 2015 via Android 毫无价值的问题。 面初级切图仔出普通个结构的页面和 html 让写样式就行了。 |
51 YuJianrong Aug 17, 2015 via iPhone 这个问题还好,我觉得 css 的 killer 问题应该是给两个 css selector 问谁的优先级高以及为什么。 没针对复习过能答出来估计是大牛…… |
52 orvice Aug 17, 2015 跪了。。 |
53 windfarer Aug 17, 2015 我觉得这个问题能这么难,完全是因为一开始这地方设计得就比较 2B |
54 LancerComet Aug 17, 2015 楼主应该问问 CSS3 属性与 Chrome 中的 GraphicsLayer 的联系啊渲染原理啊之类的啪啪啪,见到能答的就收。 |
55 ceoimon Aug 17, 2015 又复习了一遍... 看了 banri 的回复才知道 fixed 相对于视口 viewport 定位, 所以如果我答相对于浏览器窗口( browser window )算“不准确”吗... 实际上问题 “除了 fixed absolute relative 还有哪些取值”确实没什么价值, static 定位即使不知道名字也至少知道有这么一个东西吧,还是你想得到 inherit 这种答复,那么你能说出不能使用 inherit 值的 CSS 属性吗? initial 值真的有人用吗... 附: CSS 中的 initial 值有什么卵用?: http://stackoverflow.com/questions/18534561/what-is-use-of-initial-value-in-css |
56 SoloCompany Aug 17, 2015 人家好不容易背了半天的 box-sizing 你来问这个? |
57 yhxx Aug 17, 2015 前一段时间也被问了这个问题,答了 5 个,自以为答得不错,被批评不关注新姿势。 查了一下发现现在有 8 个了。。。。 |
60 msg7086 Aug 17, 2015 @sumhat 有啊。 否则还要上这么多课做什么。写代码无非就是照着手册搬,出问题爆栈。学金融的无非一大堆概念和公式,有需要去翻翻书就好了还拿什么 MBA 。 如果只是天天查爆栈的话,大概就只能做个底层民工。高端码农的目标应该是能在爆栈上解决问题,而不是遇到问题去爆栈上找人求助 /找贴参考。(特别是,如果爆栈上一堆人在问的问题,多数是很浅的问题。) 如果是招后端的,面前端面到那么细是不应该。然而你一个前端来面,面得细点并不过分吧。 像这种 position 的知识如果你不知道的话,并不是说要用的时候搜一下就知道了,而是要用的时候你连他们的「存在」都不知道。这就会造成决定性的差异了。 这和回字的多少种写法没太大关系。回随便你怎么写都不影响使用。 CSS 你不能随便写啊。 |
61 iyaozhen Aug 17, 2015 然而校招时这道题必背呀。不过 absolute 这个确实一开始不好理解。 |
62 shiny PRO 面试的目的不是要考倒别人,而是看对方解决问题的能力。 靠这种题目来筛选新手也是难为 LZ 了 |
63 nigelvon Aug 18, 2015 面试官的初级阶段。 |
64 MaiCong Aug 18, 2015 via iPad |
65 sumhat Aug 18, 2015 @msg7086 对于你说的情况,我更希望面试官的问法是:做出某一类的 UI 效果,需要怎么写 CSS/HTML ;而不是默写 position 有几种可能的值。前者可能有多种解法,而后者就是唯一解。 我不太了解 CSS ,但它应该和其它语言一样,解决一个问题,可能有多种做法。如果面试者解决不了某个问题,说他能力差无可厚非;而他若是通过另外的方法,在不依赖使用 position 而解决这个问题的情况下,非要被说成不知道 position 而被淘汰,那则是面试官的问题了。 |
67 P233 Aug 18, 2015 对 CSS 基础理解不深刻,往往写出的 HTML 结构很差,甚至混乱。问问基础问题不算什么吧? |
68 kaifazhe Aug 18, 2015 做好前端要有钻牛角尖的精神 http://www.imooc.com/learn/192?src=sugc |
69 qdwang Aug 18, 2015 via Android 就是 lz 这样的人太多 所以我转行不做前端了 |
70 leojoy710 Aug 18, 2015 昨天占了个沙发...对 LZ 表示深深的赞同... 今天上来一看...就一个感觉... 卧槽...原来真么多人对前端的要求这么低... |
71 FrankFang128 OP @qdwang 那你还挺脆弱的。 |
72 FrankFang128 OP @leojoy710 恩,低得出乎我意料。 |
73 FrankFang128 OP @kaifazhe 张鑫旭对 CSS 是挺能钻研的。 |
74 coolzjy Aug 18, 2015 现实情况是:能出作品的不一定能答得出,能答得出的不一定能出作品 |
75 markyun Aug 18, 2015 你问的对,资深的工程师能把 absolute 和 relative 弄混,这样的人不要也罢, 因为团队需要的是:你这个人具有可以依靠的才能(靠谱)。 具体参见我整理过的一篇面试题 : https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions |
76 along Aug 18, 2015 div class="reply_content">前端群管理几年下来,总结了下几类人:刻苦钻研的,任何问题都会举一反三发问,并且找到相关内容系统了解的 “我不是做这个的,我就是偶尔用一下,你就告诉我怎么做就行,我不想知道为什么” 同一个问题,隔几天问一下,至于为什么,就是知其然不知其所以然,然后记忆模糊。 “这个效果怎么做啊”,“有没有人帮我做一下啊”,“这个效果谁有代码,‘分享’一下啊” 多说一句,很多人在群里见到好东西就要人分享,见到就要人分享,就只见他索取,不见有回报。常言道”前端没有秘密“,代码都在那了,有些人就是懒得自己去弄,一定要别人送到嘴边。对这种人,就呵呵了。(楼有点歪,对不住了。) 话说,面试的时候,问问基础的就可以筛选一大批了。这也是不好招人的一大原因。半瓶水太多。 |
77 FrankFang128 OP @coolzjy 有作品就不用答这种题了,因为他在项目经验和动手能力已经加分了。 没作品的话我问什么?只能问基础。 |
78 tabris17 Aug 18, 2015 @FrankFang128 我早就弃前端这个坑了。确实,前端知识更新快,但是都是些无用的知识,正如楼上有人所说,茴香豆的茴有几种写法,能写出四种的人并不比写出三种的人高明多少。这些知识对能力提升并没有什么帮助。 |
79 xohozu Aug 18, 2015 话说阿里不是让前端、客户端这些岗位的无经验者路转 Java 嘛 XD |
80 FrankFang128 OP @xohozu 不可能啊,阿里 Java 这么多, Java 比前端能有 7:1 ,怎么可能让人转 Java 。 |
81 xohozu Aug 18, 2015 @FrankFang128 做 Java 后备军,宁缺毋滥(Java 除外)。 |
82 learnshare Aug 18, 2015 sticky 几乎可以忽略掉 |
83 zongwan Aug 18, 2015 突然蹦出来一个可以鄙视 80%面试者的前端 楼主前端面试是不是只看之前经验如何? 招过来就直接要干活的? 招学生,有没有培养的打算? 需要计较那么多问题吗? 直接测试对互联网相关的兴趣爱好 不就可以判断是否值得培养了吗? 建议学生们都学客户端吧 IOS/Android 放弃前端这种高大上 接近全栈的工作 我周围的同事对招进来一年不到经验 连 gt 都不会的新手都手把手教 我也本以为新手技术很菜,但客户端就让这些"新手" 做出来了 难道"新手" 没有经验的顾虑动手能力更强吗 |
84 vebuqi Aug 18, 2015 请问招 16 届的吗?坐标哪里 |
85 Mcatt Aug 18, 2015 表示无压力 |
86 FrankFang128 OP @vebuqi 杭州, 16 届内推时间已过,现在只有统招了。你找工作的话这两个月紧盯各大网站的招聘公告。 https://campus.alibaba.com/index.htm 过了这两个月机会就少了。 |
87 lijingyu68 Aug 18, 2015 @ceoimon @FrankFang128 其实取值除过通用的那两个,还有: static | relative | absolute | fixed | center | page | sticky |
88 latyas Aug 18, 2015 都是标准规定的,既然都是规定的都可以搜到,为什么还要作为基础来考? |
89 lausius Aug 18, 2015 确实问到我了。看标题还以为又是招聘广告。 |
90 iwege Aug 18, 2015 不然楼主给一个答案?不给答案的提问都是找碴。 |
91 andy12530 Aug 18, 2015 知道 sticky 属性的同学, css 这一块应该不会差。 |
92 FrankFang128 OP |
93 chimon Aug 18, 2015 马克一下,我不觉得吐槽这个有什么不好啊~ 之前也有盒模型都不知道的姑娘上来就开 3k ,我觉得太浮躁了,知道答案的人至少知道他切图一般不会有问题,连个大概的答案都说不上来的人,即使有作品也可能是比别人多花两倍时间慢慢调整才做出来的? |
94 RoshanWu Aug 18, 2015 这道问题我也是每次面试必问,问法少有不同: 1. position 定位有几种方式 2. 这几种方式中,哪些是可以让元素脱离文档流的 然后基本上就要把脱离文档流是什么意思解释一遍。。。 |
95 catoncat Aug 18, 2015 哈哈 我也很喜欢问这个。确实很坑爹,很多人都以为前端就是宽高和颜色。。。 |
97 KuroNekoFan Aug 18, 2015 确实很基础,不过感觉 initial 和 inherit 两个取值不知道也罢 |
98 ericls Aug 18, 2015 还不如面试他们是否会 google 随便是谁 看到这种问题 都需要 google 的吧 |
99 FrankFang128 OP @ericls 电话面试,不方便 |
100 FrankFang128 OP 来,翻页 |