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(><)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的方式，例如：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表