浅谈CSS编程中的定位问题

当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说，有一些东西会绊倒新手，所以在它成为你的惯用技巧前你需要掌握它们。

　　一旦你更深入地了解了它是怎么运作的，你就能够做出一些更棒的事情来。
　　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。