浅谈CSS程序编写中的精准定位难题

当人们刚触碰合理布局的情况下都较为趋向于应用精准定位的方法。由于精准定位的定义看起来仿佛较为非常容易把握。表层上你准确地特定了1个块元素所处的部位那末它就会位于于那里。但是精准定位比你刚看到的情况下要略微繁杂1点。针对精准定位来讲，有1些物品会绊倒初学者，因此在它变成你的常用技能前你必须把握它们。

　　1旦你更深层次地掌握了它是如何运行的，你就可以够做出1些更棒的事儿来。
　　CSS盒实体模型和精准定位的种类

　　以便弄清楚精准定位最先你得掌握CSS盒实体模型。在上1句中的连接是我写在InstantShift 中的1篇有关盒实体模型的文章内容。我在那篇文章内容做了详尽的解读并会在这篇文章内容中做1个迅速的总结。

　　在CSS中，每个元素都由1个矩形框盒子所包括。每个盒子都会具备1个內容区，內容区被1个内边距所包裹，内边距外是盒子的边框，而且在边框以外会有1个外边距用于与别的盒子隔开起来。这些你能够从下面这张照片看到。

　精准定位方式要求了1个盒子在整体的合理布局上应当处在甚么部位和对周边的盒子会有甚么危害。精准定位方式包含了基本文本文档流，波动，和几类型型的 position 精准定位的元素。

　　CSS position 特性能够取5种值：

    position: absolute
    position: relative
    position: fixed
    position: static
    position: inherit

　　我会在下应对前3个值开展详尽的论述并简易地解读1下最终两个值。

　　static 是 position 默认设置的特性值。任何运用了 position:static 的元素都处在基本文本文档流中。它处在甚么部位和它怎样危害附近的元素全是由盒实体模型所决策的。

　　1个 static 精准定位的元素会忽视全部 top，right，bottom，left 和 z-index 特性所申明的值。以便让你的元素能应用任何的这些特性，你必须先为它的 position 特性运用这3个值的在其中之1： absolute，relative，fixed

　　position 值为 inherit 的元素和别的全部特性的承继值1样，元素只是简易地运用了与父元素1样的 position 值。
　　肯定精准定位（Absolute Positioning）

　　肯定精准定位的元素会彻底地从基本文本文档流中摆脱。针对包围着它的元素而言，它会将该肯定精准定位元素视作不存在。就仿佛 display 特性被设为 none 1样。假如你要想维持它所占据的部位而不被别的元素所填充，那末你必须应用别的的精准定位方法。

　　你能够根据 top, right, bottom, 和 left 4个特性来设定肯定精准定位元素的部位。但你一般只会设定它们在其中的两个，top 或 bottom，和 left 或 right。默认设置地它们的值都为 auto。

　　弄搞清楚肯定精准定位的重要是了解它的起始点在哪儿里。假如 top 被设定为20px那末你要了解这20px是从哪里刚开始测算的。

　　1个肯定精准定位的元素的起始点部位是相对它的第1个 position 值不为 static 的父元素而言的。假如在它的父元素链上沒有考虑标准的父元素，那末肯定精准定位元素则会相对文本文档对话框来开展精准定位。哈！

　　有关“相对性”这个定义你也许有点蒙蔽，特别是也有1个叫相对性精准定位的物品，这是大家都还没讲到的。

　　当你在1个元素的款式上设定 position:absolute 代表着必须考虑到父元素，而且假如父元素的 position 值不为 static ，那末肯定精准定位元素的起始点为父元素的左上角部位。

　　假如父元素沒有运用除 static 之外的 position 精准定位，那末它会查验父元素的父元素是不是有运用非 static 精准定位。假如该元素运用了精准定位，那末它的左上角便会变成肯定元素的起始点部位。假如沒有则会再次向上遍历DOM直至寻找1个精准定位元素或找寻不成功以抵达最外层的访问器对话框。
　　相对性精准定位（Relative Positioning）

　　相对性精准定位的元素也是依据 top, right, bottom, 和 left 4个特性来决策自身的部位的。但只是相对它们原先所处在的部位开展挪动。在某种实际意义上来讲，为元素设定相对性精准定位和为元素加上 margin 有点类似，但也是有1个关键的差别。差别便是在紧紧围绕在相对性精准定位元素周边的元素会忽视相对性精准定位元素的挪动。

　　大家能够把它看作是1张照片的重像从真正的照片的部位刚开始开展了1点挪动。它初始照片所占有的部位依然保存，但大家早已无法再看到它，只能看到它的重像。这样就让元素之间能够开展部位的重合，由于相对性精准定位元素可以挪动到别的元素所占有的室内空间中。

　　相对性精准定位元素离去了一切正常文本文档流，但依然危害着紧紧围绕着它的元素。那些元素主要表现地就仿佛这个相对性精准定位元素依然在一切正常文本文档流之中。

　　大家不用再逼问这个相对性的部位是在哪儿里。由于这个相对性部位很明显是一切正常的文本文档流。相对性精准定位有点儿像为元素加上了 margin ，对邻近元向来说却好像甚么都没产生过。但具体上并沒有提升任何的 margin 。
　　固定不动精准定位（Fixed Positioning）

　　固定不动精准定位的个人行为相近于肯定精准定位，但也是有1些不一样的地区。

　　最先，固定不动精准定位一直相对访问器对话框来开展精准定位的，而且根据哪些特性的 top, right, bottom, 和 left 特性来决策其部位。它抛下了它的父元素，它便是精准定位中主要表现地有点儿叛逆。

　　第2个不一样点是其在姓名上是承继的。固定不动精准定位的元素是固定不动的。它们其实不伴随着网页页面的翻转而挪动。你能够告知元素它所处的部位并始终已不挪动。噢~仿佛还挺聪明的。

　　在某种实际意义上说固定不动精准定位元素有点儿相近固定不动的情况照片，只但是它的外层器皿块一直访问器对话框而已。假如你在 body 中设定1个情况照片那末它与1个固定不动精准定位的元素的个人行为时十分像的，只但是在部位上的精度会略少1些。

　　情况照片也不可以更改其在第3个维度的尺寸，也因此带来了 z-index 特性。
　　摆脱了平面的 Z-Index

　　这个网页页面是1个2维平面。它具备宽度和高宽比。大家活在1个用 z-index 做为其深层的3维的全球之中。这个附加的维度可以穿越1个平面。

由上图可知，高的 z-index 坐落于低的 z-index 的上面并朝网页页面的上方健身运动。相反地，1个低的 z-index 在高的 z-index 的下面并朝网页页面正下方健身运动。

　　沒有的 z-index 的话，精准定位元素会有点儿不便。由于 z-index 能让1个精准定位元素坐落于另外一个元素的上方或正下方，这也许能让你做出点造就性的物品。全部的元素的默认设置的 z-index 值都为0，而且大家能够对 z-index 应用负值。

　　z-index 具体上比我在这里叙述的要更为地繁杂，但细节写在了另外一篇文章内容里。如今只必须记牢这个附加维度的基础定义和它的层叠次序，此外还要记牢仅有精准定位元素才可以运用 z-index特性。
　　精准定位的难题

　　针对精准定位元向来说由几个较为普遍的难题，都值得大家好好掌握。

　　1.你不可以在同1个特性之中运用精准定位特性和波动。由于对应用甚么样的精准定位计划方案来讲二者的命令时相矛盾的。假如你把两个特性都加上到1个同样的元素上，那末就期待在CSS中较后的那个特性时你要想应用的吧。

　　2.Margin 不容易在肯定元素上折叠。假定你具备1个 margin-bottom 为20px的段落。在段落伍面是1个具备30px的 margin-top 的照片。那末段落和照片之间的室内空间不容易是50px（20px+30px）而是30px（30px > 20px）。这便是所谓的 margin-collapse，两个 margin 汇合并（折叠）成1个 margin。

　　肯定精准定位元素不容易像那样开展 margin 的折叠。这会使它们跟预期的不1样。

　　3.IE在 Z-index 上有1些BUG。在IE 6中 select 元素一直处在层叠等级的最上方而无论它的 z-index 和别的元素的 z-index 是是多少。

　　IE 6和IE 7在层叠等级上又有此外1个难题。IE 6由最外层的精准定位元素的等级来决策哪1组的元素处在等级的最上面，而并不是每个独立的元素本身的等级决策。

　　对上面这段构造，你会意料段落元素处在层叠等级的最上方。由于它具备最大的 z-index 值。但在IE 6和IE 7中，照片为处在段落的上方。由于 img 具备比 div 更为高的 z-index 等级。因而它会坐落于全部 div 的子元素的上方。
　　总结

　　1个元素上所设定的部位特性会依据在其中的1种CSS精准定位方式来运行。你能够为精准定位元素设定 absolute, relative, fixed, static (默认设置), 和 inherit 中的在其中1个值。

　　精准定位方式和CSS精准定位元素，界定了1个盒子在合理布局中应当处在甚么部位和紧紧围绕它的元素会遭受精准定位元素带来的危害。

　　z-index 特性只能被运用与精准定位元素上。它为网页页面提升了第3个维度并设定了元素的等级上的次序。

　　精准定位特性看起来仿佛很好了解，但它的运行与它在表层所看到的有点儿不1样。你将会会感觉的是相对性精准定位更为相近肯定精准定位。当在做合理布局设计方案的情况下你一般会想应用波动并在特定的元素上运用精准定位来摆脱合理布局。