Love life, love sports, love to learn, & love...

CSS 之 Position 详解

在网页设计中，能够很好地定位其中的元素，直接关系到页面的效果。只有把各元素都合理地放置到页面中，才能搭建触美观的页面效果。

在 CSS 中，可以通过 position、float、z-index 等定位方式对元素进行定位。本文将讨论一下难以理解的 position 定位方式。

在市面上有很多关于 CSS 的参考书籍，但是这些书籍往往会对那些诸如字体，文本，背景等简单的属性进行大张旗鼓的介绍，而对那些同样重要但难以理解的属性仅只言片语一笔带过，有避重就轻的嫌疑。CSS 中主要难以理解的属性包括盒型模型，定位等。本文将主要讲述关于 position 的理解，力求让您看完本文后对 position 有着最全面的认识。

Position 用于规定页面元素（主要指框模型）的定位方式：静态定位、绝对定位、相对定位还是固定定位，其中的静态定位是默认的定位方式。

position 的四个属性值分别为：

• static
• absolute
• relative
• fixed

注意：其实，position 的属性值有 5 个，除去上述 4 个属性外，还有 inherit 属性，由字面意思可知 inherit 属性是用来继承其父级元素的定位方式的。

下面分别讲述这四个属性。

静态定位（static）

这是元素的默认定位方式，所以通常都在代码中省略不写。元素按照正常的文档流依次进行顺序排列，每一块区域都自然无缝地结合在一起，从上之下，如果设置的是行内对象，那么区域按照从左至右无缝拼接。

绝对定位（absolute）

元素按照它的第一个其定位方式为非静态定位方式的父级元素（或祖先元素）的位置进行定位。第一个其定位方式为非静态定位方式的父级元素是指，从最内层的父级元素开始，若其定位方式是默认的定位方式，即静态定位方式，则继续查看其祖父级元素，直到其某个祖先元素的定位方式为绝对定位、相对定位或者固定定位三者之一，则此祖先元素即为所要参考的元素。如果没有这样的祖先级元素，则就会以 body 为定位对象，即按照浏览器的窗口进行定位。

绝对定位是最容易令人误解的方式，许多人将其误解为不管其父级元素的定位方式如何，总是按照浏览器窗口来进行定位，这其实是错误的，只有当其祖先级元素的定位方式都是静态定位方式的时候，才会按照浏览器窗口来定位。实际上，这是 fixed 属性的特点。

参考点的位置也是值得注意的。如果元素本身和参考的父级元素设定了 margin，border，padding 等属性，那么，元素本身的参考点为其 margin 的外边界，而其父级元素的参考点为 border 的内部边界。

较之于相对定位 relative，绝对定位的特点是当对象发生位移后，原先初始位置的内容如同被去除一样，这个对象独立于其它的页面元素，额初始位置的空白会被其它内容自然填补。

相对定位（relative）

元素按照它的原本应该出现的位置进行定位。原本应该出现的位置就是 static 属性下的位置，也就是默认情况下的位置。例如“left:20px”表示将元素相对于其初始位置右移 20px。

当设定不同的偏移数值后，相对于初始位置发生改变，而初始位置会留下空白占位。

固定定位（fiexed）

元素按照浏览器窗口进行定位。当页面大小超出浏览器窗口时，元素会跟随滚动条一起移动。其实，固定定位是特殊的绝对定位，即固定定位总是以 body 为定位对象的，按照浏览器的窗口进行定位。

固定定位和绝对定位的性质一样，它们所定义的框的位置是独立于其它页面内容之外的，这样，难免有时它们会叠加在一起，这种情况可以使用 Z 轴属性，即层的叠加特性来改变它们的顺序。