CSS的position属性完全解析

一、定位基本原理

对于前端开发工程师来说，编写CSS是前端开发工作中必不可少的一个内容，在CSS中的position属性又是非常重要的一个方面。顾名思义，所谓position，即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石，看似很容易学习，很多的前端工程师也会说自己掌握得很好，但事实上是这样吗？作为一个在前端开发的道路上慢慢前行的新人，我不敢这么说，那么就通过这篇文章与大家一起，了解position的奥秘。

首先，既然是CSS中的属性之一，那么我们就有必要研究一下W3C的CSS文档，毕竟这才是对此属性说明最为详细的地方。在这里要插一句，目前市面上充斥着大量的教学书籍，网络上也有很多相关的学习资源，其中固然不乏精品，但是会花点时间，认真阅读官方文档的又有多少人呢，有的时候，最乏味的往往是最准确的。

好了，话不多说，官方文档中关于position属性的内容大致是这样的：

In CSS 2.1, a box may be laid out according to three positioning schemes:

1、Normal flow

2、Floats

3、Absolute positioning

1. 常规文档流。包括块级元素排版，行内元素排版以及对块级元素和行内元素相对位置的排版。

2. 浮动。在浮动模型中，元素先按照正常文档流定位，然后从文档流中移出，根据设置向左或者向右尽可能地移动。

3. 绝对定位。元素会完全从文档流中移出，再根据父元素进行定位。

一个元素如果是根元素，或者有浮动或绝对定位的话，那它就是在常规文档流之外的，其他情况都是在文档流之内。文档中有这么一句：The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A. 有些绕，以我并不深厚的英语能力来翻译的话，应该是：元素A的flow是由元素A本身以及所有最近的文档流之外的父元素是A的流内元素所组成的。（翻译得太惨不忍睹了，求大神指点o(>�n<)o）。

二、position属性详解

在CSS 2.1中，元素的定位方式是由position和display属性共同作用所决定的，我们先来看position属性

position属性的可取值：static | relative | absolute | fixed | inherit

默认值：static

每个值的意义：

static: 常规方式定位box，此时设置top, right, bottom, left属性是无效的。

relative: 元素本身的的位置的定位方式和static是一样的，但是实际位置会相对于原位置有所偏移，是通过top, right, bottom, left的设置实现的。注意：display设置为table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell和table-caption的元素是无法应用position: relative的，这也很好理解，这些表格类元素如果会相对于正常位置偏移的话不是很奇怪么！

absolute: 元素脱离文档流，“几乎”独立了。位置通过top, right, bottom, left来设置，当然，参照基点是包含元素的父元素~绝对定位的元素对相邻元素的定位没有任何影响，相互之间的层叠关系是通过z-index来设置的，同时，绝对定位元素的margin之间也不会发生折叠。

fixed: 这是个比较有趣的值。它的定位计算方式和绝对定位是一样的，但是也有不同。元素的位置一旦确定了，在屏幕显示器上，它会保持固定不动，在印刷媒体类型上，它会在每页出现在固定位置，在其他的媒体类型上，表现方式则没有定义。不过，如果希望一个box在屏幕和印刷媒体上的表现不同的话，可以使用@media rule的方式，例如：

CSS Code 复制内容到剪贴板

@media screen {
    h1#first { position: fixed; }
}
@media print {
    h1#first { position: static; }
}

还有一个inherit值，不用多说，就是从父元素继承position值了。

三、定位方式：top, right, bottom, left

这四个属性其实可以放在一块儿说，其实是差不多的，只是定位的相对基线变了而已。文档上的说明有些��嗦了，不过that's what official document is对吧？

可设定的值为：length, percentage, auto, inherit

不论设定的值为什么，意义都是元素的上右下左距离父元素的上右下左的边距。

这里要提一下auto值，对于非替换元素(non-replaced elements)和替换元素(replaced elements)auto的表现是不一样的，非替换元素指的是浏览器根据标签的元素和属性来判断具体显示的内容，如：

XML/HTML Code 复制内容到剪贴板

<input type="text" />

这是一个文本输入框，换成其他的属性的话，浏览器的显示就会不一样。

替换元素的例子：

XML/HTML Code 复制内容到剪贴板

<p>I'm classicemip>

(X)HTML的大多数元素都是非替换元素，他们将内容直接告诉浏览器，浏览器再显示出来。

下面回到auto上来，对于非替换元素，auto值的效果取决于哪些相关的属性同样具有auto值，比较难理解是吗，好的，我们给出下面的例子：

CSS Code 复制内容到剪贴板

     A frame document with CSS 2.1
     "text/css" media="screen">
       body { height: 8.5in }
       #header {
         position: fixed;
         width: 100%;
         height: 15%;
         top: 0;
         rightright: 0;
         bottombottom: auto;
         left: 0;
       }
       #sidebar {
         position: fixed;
         width: 10em;
         height: auto;
         top: 15%;
         rightright: auto;
         bottombottom: 100px;
         left: 0;
       }
       #main {
         position: fixed;
         width: auto;
         height: auto;
         top: 15%;
         rightright: 0;
         bottombottom: 100px;
         left: 10em;
       }
       #footer {
         position: fixed;
         width: 100%;
         height: 100px;
         top: auto;
         rightright: 0;
         bottombottom: 0;
         left: 0;
       }



     "header"> ...

  

     "sidebar"> ...  

  

     "main"> ...  

  

     "footer"> ...