细解CSS中的定位技术

CSS中的元素定位问题长久以来一直是困扰网页设计者的一大难题，而且有关CSS讲解的书中关于这方面的讲解也确实很不给力，带有一种朦胧感，其中有些作者甚至在讲解中漏洞百出，浏览器根本不按照作者的讲解方式进行定位。所以，我觉得很有必要在这方面进行详细的解说。根据我对有关CSS书籍的研究，再加上对网上许多资料的查询，以及亲自编码浏览验证，我对CSS的总结如下，希望对网页设计初学者的学习能带来一些帮助。鉴于笔者水平有限，不妥之处在所难免，恳请广大读者给予批评指正。若观点有待商榷，可发邮件至yelbosh@foxmail.com.

引言：（本文均以大众浏览器IE8.0为标准，若其浏览效果与Chrome或firefox不同，则笔者一定会特意声明，否则为效果相同）

CSS中的定位技术简概：

static ，CSS中的写法是：position: static，静态，无特殊定位。此时容器按照普通布局在页面上显示，各个定位坐标并不对它产生作用。该属性是浏览器的默认属性。

Relative，CSS中的写法是：position:relative; 他的意思是相对定位，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 ，该属性值表示容器仍然是普通布局，但是计算定位的时候，按照它应该所在的位置（即占位空间的原始点）进行定量偏移后显示。他是参照父级的原始点为原始点进行文档流整理，无父级则以BODY的原始点为原始点。

小贴士：占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。

absolute : CSS中的写法是：position: absolute ，绝对，将对象从文档流中拖出，通过width、height、left，right，top，bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义（通过透明层的建立可以更深刻理解）。绝对定位的元素抛开了文档排列布局，相当于游离于文档页面之上，所以元素会相互覆盖。元素覆盖的规则是根据各自代码出现的先后顺序决定的（z-index这个属性可以改变这样的覆盖顺序）。

小贴士：top和left用来定义元素的坐标。Top表示元素相对于基准点在竖直方向的偏移量，正值表示向下偏移，负值表示向上偏移。同理，left表示元素相对于基准点在水平方向的偏移量，正值表示向右偏移，负值表示向左偏移。绝对定位与相对定位里这两个属性不同的地方在于基准点的选取。

fixed : CSS中的写法是：position ：fixed，悬浮，使元素固定在屏幕的某个位置，其包含块是可视区域本身，因此它不随滚动条的滚动而滚动。（IE5.5+不支持此属性，所以此属性并不常用） 

详解：

一、下面我们可以看一个浏览器默认定位方式static的源代码及其效果。

源代码：图一

效果图：图二

很明显，浏览器显示的效果为普通的文档流，如果此时对div层使用top或left等定位属性，属性值对其并不起作用。

二、使用left、right、top和bottom属性布局相对定位元素的源代码及其效果图：

源代码：图三

效果图：图四

由此可以看出，绿色块部分使用了相对定位，其占位空间不变，物理空间也没有变（没有进行设置），而且由于top和left的作用，其相对于文档流中应该所在的位置进行了定量的偏移。Top值为180px，表示该块向下偏移了180px，left的值为120px，表示该块向右偏移了120px。绿块的占位空间仍然存在，表示该块并没有脱离文档流。思考：如果值为负情况如何呢？显然~

再思考：

既然拥有占位空间，那么有没有什么办法可以改变相对定位元素在文档流中的占位空间的位置呢？答案是显然的~我们可以使用margin属性来改变占位空间的位置

小贴士：margin属性在css中的意义是容器边距，它的值表示的是边距的宽度。大多数人便觉得它是一个绝对概念，表示的就是元素到容器边框的宽度。但是margin这个单词到底是什么意思呢？笔者查了一下google词典，解释如下：margin   /ˈmɑːdʒɪn/ DJ   /ˈmɑːrdʒən/ DJ US   /'mɑrdʒən/ KK US the amount of time, or number of votes, etc. by which somebody wins something （获胜者在时间或票数上领先的）幅度，差额，差数 countable usually singular 由此可见，margin是有相对意义的。所以，在这里，margin-top表示占位空间相对于原来位置在竖直方向的偏移量，正值表示向下偏移，负值表示向上偏移。同理，margine-left表示占位空间相对于原来位置在水平方向的偏移量，正值表示向右偏移，负值表示向左偏移。<同top与left>

其中该效果的源代码及其效果图如下图所示：

源代码：图五

效果图：图六

由此我们可以看出，绿块的占位空间移到了上面紧靠红色块的位置，此时，绿块的占位空间的位置（即文档流中的位置）的改变，也影响了下面元素的文档流位置的改变，如图所示，蓝色块的文档流位置也上移了。文档流是从上而下依次排列的。

再再思考：（不要烦哥，哥只是个传说）

如果以上两种方法混合使用，可不可以累加呢？！

答案是显然的~（读者不妨亲自试一下，这个思考题就留个悬念吧，哈哈哈哈哈哈）

不过话又说回来，除非哪个人实在闲着没事干了，我想他才会把这两种方法混着用。

笔者觉得混着用肯定不是编排网页能用的最好的方法，因为移来移去，so 麻烦！不如直接定下来。

三、这次我们来研究定位中的难点：绝对定位

为什么说它是难点呢？因为，其实很多书中并没有把这个问题真正讲清楚~

绝对定位的元素以   最近的   定位祖先元素   为参照物。

绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。

关于绝对定位的效果的源代码及其效果图：

提示：为了更好的演示该效果，我使用了透明层，并且改变了其中某些块的物理空间，以此来突显绝对定位的效果。

源代码：图七

效果图：图八

如图可以得出，本来的文档流应该为红--透明层—蓝，结果当透明层的定位方式被设为absolute后，其便被从文档流中抽出，所以透明层便脱离了文档流，于是蓝色块在文档流中的位置便也改变了，上移到了红色块的下面。但是！大家应该在这里产生疑问！透明层为什么偏偏出现在红色块的下面呢？！

为了搞明白这个问题，我们先来看一下绝对定位中的基准点（即参照物）的选取问题：

总的规则便是：绝对定位的元素以最近的定位祖先元素为参照物

何为最近？何为定位？笔者在上面已经讲的很清楚了，还有当没有满足以上条件的情况出现时，我们还给出了相应的解答，即按照浏览器默认的参照物进行定位。

细解如下：

如图所示的效果：图九

以最近的祖先定位元素为参照物的情况，上图中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————- position:relative 参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3>

此为情况一；如下图所示效果图：

图十

层级关系为：
<div ——————————— position:relative;最近的祖先定位元素，参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3>

此为情况二。还有最后一种特殊的情况：

如下图所示：图十一

参照物为最顶级的元素情况时，
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3>

一般来讲，此时的参考点是body的左上角。

我想当读者读到这里，应该差不多摸得着头脑了吧？？对，只有当使用top或left这些定位属性的时候，我们才有必要去寻找参考点与参照物，因为我们会设置偏移量。但是像上面的透明层的例子中，我们没有用到top或left或者其他的定位属性，但是透明层便直接显示在红色块的下面，何也？

 

 

其实这是一个非常简单的问题，大部分读者想必现在已经归纳了一个结论，恩，没错，就是这样的。我想你想的跟我是一样的，大胆说出你的归纳，不会错的。这样学习，才是真正的学习。Use your head！

 

扯远了，话说回来，这个结论是什么呢？正是这一点，许多书上没有讲清楚，致使我在设计网页的时候困惑很大。其实很简单，归根结底，问题出在这：（下一行，见证奇迹的时刻）

 

 

设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流！

对，问题就在这里！元素的默认位置不是（0，0）！那究竟在哪呢？

我想大家现在也心知肚明了吧，绝对定位只是将文档脱离文档流，相当于把它在z轴方向上平移了一个单位，z轴的位置变了，但是x轴y轴的位置是不变的，所以，元素的默认位置就是元素在文档流中的位置！只不过其后面的元素向上平移了！

 

 

Margine属性也可以作用于绝对定位的元素，和相对定位的意义是一样的，它表示的是偏移的量，大家可以参照一下上面的讲解，然后自己动手试一下。笔者在此不再赘述。

 

希望以上讲解可以为你的定位学习带来些许帮助。

                                                

 

 

                                                                                                                       鸭脖先生

                                                                                           2011年2月20日凌晨一点

                                                        <buyaoxueouaoye>

               连接推荐：http://ceeji.net，大家可以参照一下该站住手写的网页源代码，复习一下定位技术。

由于日志中无法粘贴截图，十分遗憾，所以，感兴趣的读者可以到我邮箱里索要截图以便理解。邮箱地址见上。