你对position的了解到底有多少?
此文根据Steven Bradley的《How Well Do You Understand CSS Positioning?》所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。
当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们。
一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来。
CSS盒模型和定位的类型
为了搞清楚定位首先你得了解CSS盒模型。在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章。我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结。
在CSS中,每一个元素都由一个矩形盒子所包含。每一个盒子都会具有一个内容区,内容区被一个内边距所包裹,内边距外是盒子的边框,并且在边框之外会有一个外边距用于与其他盒子分隔开来。这些你可以从下面这张图片看到。
定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。定位模式包括了常规文档流,浮动,和几种类型的 position 定位的元素。
CSS position 属性可以取5种值:
- position: absolute
- position: relative
- position: fixed
- position: static
- position: inherit
我会在下面对前三个值进行详细的阐述并简单地讲解一下最后两个值。
static 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档流中。它处于什么位置以及它如何影响周边的元素都是由盒模型所决定的。
一个 static 定位的元素会忽略所有 top,right,bottom,left 以及 z-index 属性所声明的值。为了让你的元素能使用任何的这些属性,你需要先为它的 position 属性应用这三个值的其中之一: absolute,relative,fixed
position 值为 inherit 的元素和其他所有属性的继承值一样,元素只是简单地应用了与父元素一样的 position 值。
绝对定位(Absolute Positioning)
绝对定位的元素会完全地从常规文档流中脱离。对于包围它的元素而言,它会将该绝对定位元素视为不存在。就好像 display 属性被设为 none 一样。如果你想要保持它所占有的位置而不被其他元素所填充,那么你需要使用其他的定位方式。
你可以通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。但你通常只会设置它们其中的两个,top 或者 bottom,以及 left 或者 right。默认地它们的值都为 auto。
弄明白绝对定位的关键是知道它的起点在哪里。如果 top 被设置为20px那么你要知道这20px是从哪里开始计算的。
一个绝对定位的元素的起点位置是相对于它的第一个 position 值不为 static 的父元素而言的。如果在它的父元素链上没有满足条件的父元素,那么绝对定位元素则会相对于文档窗口来进行定位。哈!
关于“相对”这个概念你或许有点迷惑,尤其是还有一个叫相对定位的东西,这是我们还没有讲到的。
当你在一个元素的样式上设置 position:absolute 意味着需要考虑父元素,并且如果父元素的 position 值不为 static ,那么绝对定位元素的起点为父元素的左上角位置。
如果父元素没有应用除了 static 以外的 position 定位,那么它会检查父元素的父元素是否有应用非 static 定位。如果该元素应用了定位,那么它的左上角便会成为绝对元素的起点位置。如果没有则会继续向上遍历DOM直到找到一个定位元素或者寻找失败以到达最外层的浏览器窗口。
相对定位(Relative Positioning)
相对定位的元素也是根据 top, right, bottom, 和 left 四个属性来决定自己的位置的。但只是相对于它们原来所处于的位置进行移动。在某种意义上来说,为元素设置相对定位和为元素添加 margin 有点相似,但也有一个重要的区别。区别就是在围绕在相对定位元素附近的元素会忽略相对定位元素的移动。
我们可以把它看做是一张图片的重像从真实的图片的位置开始进行了一点移动。它原始图片所占据的位置仍然保留,但我们已经没法再看到它,只能看到它的重像。这样就让元素之间可以进行位置的重叠,因为相对定位元素能够移动到其他元素所占据的空间中。
相对定位元素离开了正常文档流,但仍然影响着围绕着它的元素。那些元素表现地就好像这个相对定位元素仍然在正常文档流当中。
我们无需再追问这个相对的位置是在哪里。因为这个相对位置很显然是正常的文档流。相对定位有点儿像为元素添加了 margin ,对相邻元素来说却像是什么都没发生过。但实际上并没有增加任何的 margin 。
固定定位(Fixed Positioning)
固定定位的行为类似于绝对定位,但也有一些不同的地方。
首先,固定定位总是相对于浏览器窗口来进行定位的,并且通过哪些属性的 top, right, bottom, 和 left 属性来决定其位置。它抛弃了它的父元素,它就是定位中表现地有点儿反叛。
第二个不同点是其在名字上是继承的。固定定位的元素是固定的。它们并不随着页面的滚动而移动。你可以告诉元素它所处的位置并永远不再移动。噢~好像还挺乖巧的。
在某种意义上说固定定位元素有点儿类似固定的背景图片,只不过它的外层容器块总是浏览器窗口罢了。如果你在 body 中设置一个背景图片那么它与一个固定定位的元素的行为时非常像的,只不过在位置上的精度会略少一些。
背景图片也不能改变其在第三个维度的大小,也因而带来了 z-index 属性。
打破了平面的 Z-Index
这个页面是一个二维平面。它具有宽度和高度。我们活在一个用 z-index 作为其深度的三维的世界当中。这个额外的维度能够穿越一个平面。
由上图可知,高的 z-index 位于低的 z-index 的上面并朝页面的上方运动。相反地,一个低的 z-index 在高的 z-index 的下面并朝页面下方运动。
没有的 z-index 的话,定位元素会有点儿麻烦。因为 z-index 能让一个定位元素位于另一个元素的上方或者下方,这或许能让你做出点创造性的东西。所有的元素的默认的 z-index 值都为0,并且我们可以对 z-index 使用负值。
z-index 实际上比我在这里描述的要更加地复杂,但细节写在了另一篇文章里。现在只需要记住这个额外维度的基本概念以及它的堆叠顺序,另外还要记住只有定位元素才能应用 z-index属性。
定位的问题
对于定位元素来说由几个比较常见的问题,都值得我们好好了解。
1.你不能在同一个属性当中应用定位属性和浮动。因为对使用什么样的定位方案来说两者的指令时相冲突的。如果你把两个属性都添加到一个相同的元素上,那么就期望在CSS中较后的那个属性时你想要使用的吧。
2.Margin 不会在绝对元素上折叠。假设你具有一个 margin-bottom 为20px的段落。在段落后面是一个具有30px的 margin-top 的图片。那么段落和图片之间的空间不会是50px(20px+30px)而是30px(30px > 20px)。这就是所谓的 margin-collapse,两个 margin 会合并(折叠)成一个 margin。
绝对定位元素不会像那样进行 margin 的折叠。这会使它们跟预期的不一样。
3.IE在 Z-index 上有一些BUG。在IE 6中 select 元素总是处于堆叠层级的最上方而不管它的 z-index 和其他元素的 z-index 是多少。
IE 6和IE 7在堆叠层级上又有另外一个问题。IE 6由最外层的定位元素的层级来决定哪一组的元素处于层级的最上面,而不是每一个单独的元素自身的层级决定。
<div style="z-index: ">
<p style="z-index: 1"></p>
</div>
<img style="z-index: " />
对上面这段结构,你会预料段落元素处于堆叠层级的最上方。因为它具有最大的 z-index 值。但在IE 6和IE 7中,图片为处于段落的上方。因为 img 具有比 div 更加高的 z-index 层级。因此它会位于所有 div 的子元素的上方。
总结
一个元素上所设置的位置属性会根据其中的一种CSS定位模式来运作。你可以为定位元素设置 absolute, relative, fixed, static (默认), 和 inherit 中的其中一个值。
定位模式和CSS定位元素,定义了一个盒子在布局中应该处于什么位置以及围绕它的元素会受到定位元素带来的影响。
z-index 属性只能被应用与定位元素上。它为页面增加了第三个维度并设置了元素的层级上的顺序。
定位属性看起来好像很好理解,但它的运作与它在表面所看到的有点儿不一样。你可能会觉得的是相对定位更加类似绝对定位。当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局。
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
英文原文:http://www.vanseodesign.com/css/css-positioning/
你对position的了解到底有多少?的更多相关文章
- 【WS-Federation】到底有多少公司在用WS-Federation
到底有多少公司在用WS-Federation? sso先调用一个登录接口 获取一个token 然后再调用各种业务接口 如果是ssl token 直接暴露就行了 没有ssl 最好每次取一个token, ...
- 到底有多少种智能指针(smart pointer)
最近Qt的blog总结了到底有多少种smart pointer, 下面是一个简要的介绍: 1. QPointer :提供对指针的保护,当一个指针被删除以后,再使用不会造成野指针或者指针溢出.比如 ...
- 乞讨N!到底有多少0
分析: 对N质因数分解 N=2^x * 3^y * 5^z....因为10 = 2*5,所以末尾0的个数仅仅和x与z有关,每一对2和5相乘能够得到一个10.于是末尾0的个数=min(x,z).在实际中 ...
- Spark技术内幕:一个图搞定Spark到底有多少行代码
Spark1.0.0发布一个多月了,那么它有多少行代码(Line of Code, LOC)? 注:代码统计未包含测试,sample.
- 2020年我国到底有多少程序员?现在学习java还来得及吗?
中国有多少程序员?现在还值得学java吗? 跪求关注,祝关注我的人都:身体健康,财源广进,福如东海,寿比南山,早上贵子,从不掉发! JAVA起于1995年,经过20多年的发展,JAVA如今已经发展成为 ...
- 电脑小知识:Windows 10是用什么语言写的?到底有多少行代码?
这是微软的内核工程师 Axel Rietschin在Quora的一个回答. Windows 10 的code base 和Windows 8.x , 7 , Vista , XP , 2000 和Wi ...
- Linux结束进程到底有多少种方法?
我们经常在Linux里使用kill命令来结束某后台进程.但kill命令实际上是向进程发送信号,并且有多种信号.终止运行一个程序只是其中一个信号而已.kill是根据进程号发送信号的,而另一个工具kill ...
- JavaScript项目重构到底有多少坑要填要踩
看到代码的那一刻我惊呆了,就一个js文件,接近2000行的代码.这个还好,比这个行数多的我见的多了,这个还吓不到我.有哪些问题,一会再说. 因为从我接手的那一刻算起,几天后就要发新版本,我只要也只能调 ...
- 一个Java字符串中到底有多少个字符?
依照Java的文档, Java中的字符内部是以UTF-16编码方式表示的,最小值是 \u0000 (0),最大值是\uffff(65535), 也就是一个字符以2个字节来表示,难道Java最多只能表示 ...
随机推荐
- CentOS下Neo4j安装教程
本文记录一下在CentOS 6.7上,安装neo4j图数据库,本文安装的版本为neo4j-community-2.3.9-unix.tar.gz. 下载Neo4j安装包 使用wget命令获取Neo4j ...
- iOS 一些常见问题
1.屏幕横屏时 xib上拖拉的控件不会跟着横过来: 是因为在主文件面里的 main interface 方框里的main 没有删除: 2.运行出现你没有权限 : 清理一下: 3.将对象转成字符串: / ...
- P4101 [HEOI2014]人人尽说江南好
题目描述 小 Z 是一个不折不扣的 ZRP(Zealot Round-game Player,回合制游戏狂热玩家),最近他 想起了小时候在江南玩过的一个游戏. 在过去,人们是要边玩游戏边填词的,比如这 ...
- [UVA 10635] Prince ans Princess
图片加载可能有点慢,请跳过题面先看题解,谢谢 这道题... 还是要点思维的... 第一眼看是个最长公共子序列,但是, \(N\le 62500\) ,并不能 \(O(n^2)\) 求 $ $ 这道题有 ...
- 洛谷 P3197 [HNOI2008]越狱 解题报告
P3197 [HNOI2008]越狱 题目描述 监狱有连续编号为\(1-N\)的\(N\)个房间,每个房间关押一个犯人,有\(M\)种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可 ...
- windows 10 enterprise 企业版 mak激活密钥
企业版用户请依次输入: slmgr /ipk NPPR9-FWDCX-D2C8J-H872K-2YT43 slmgr /skms kms.xspace.in slmgr /ato
- Laravel 项目集合
1. CMS LaraCMS https://github.com/wanglelecc/laracms 2. 电商 3. 点播 MeEdu https://github.com/Qs ...
- K8S调度之标签选择器
Kubernetes 调度简介 除了让 kubernetes 集群调度器自动为 pod 资源选择某个节点(默认调度考虑的是资源足够,并且 load 尽量平均),有些情况我们希望能更多地控制 pod 应 ...
- 关于RESTful的理解
如何更好的理解RESTful? (转自https://sanwen8.cn/p/54czrEO.html) 在测试开发中,我们经常接触到API,在调用API时候特别是第三方API时候,我们常常陷入以下 ...
- GO_05:GO语言基础map与函数
1. map 1. 类似其它语言中的哈希表活着字典,以 key-value 形式存储数据 2. key 必须是支持 == 或 != 比较运算的类型,不可以是函数.map 或 slice 3. map ...