position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于positon属性的一些理论与应用。

基础知识

postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元素的生成方式，下面我们详细说明position属性。

position四种类型

（1）static
static是position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示
（2）relative
relative翻译成中文称相对定位，设置了这个属性后，元素会根据top，left，bottom，right进行偏移，关键点是它原本的空间仍然保留。我们看下面例子：
HTML代码

CSS代码

效果图

relative效果

在这个例子中，div.relative相对定位，并且left设置为20px，left设置为50px，其相对于父元素进行偏移，并且原本的空间也占据着，下面的元素并不会顶替上去。

（3）absolute
元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。看下面例子：
HTML代码

CSS代码

效果图

absolute效果

如图所示，span标签被设置成绝对定位，就可以设置height和width属性，而且不占有原本的空间，后面的div元素会顶替上去。

（4）fixed
fixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移

包含块

在详解CSS float属性中我们提到包含块这个概念。对于position属性也有包含块这个属性，它要分几种情况来讨论：
1.根元素的包含块，根元素一般是html元素，有些浏览器会使用body作为根元素，大多数浏览器，初始包含块是一个视窗大小的矩形
2.非根元素的包含块，如果该元素的position是relative或static，它的包含块是最近的块级框，表的单元格或行内块的内容边界
我们举例进行说明，
HTML代码

CSS代码

效果图

包含块

这是相对定位元素的包含块，为最近的块级框，表的单元格或行内块的内容边界，相对定位元素相对于其包含块进行偏移，我们可以简单理解为相对于其原来的位置进行偏移。

3.非根元素的包含块，如果该元素的position是absolute，则包含块为最近的position不是static的祖先元素。
简单来说，它的包含块会从父级元素一直向上查找，找到第一个position不是static的元素为止。

偏移属性

前面的例子中已经涉及到偏移属性，它指的是元素相对于其包含块的偏移，我们称其为偏移属性，分别是top，bottom，left，right，依次代表上下左右。他们的值可以是具体的数值，也可以是百分比。如果是百分比，top和bottom是相对于包含块高度的百分比，left和right是相对于宽度的百分比。它们也可以设置负值，即有可能将元素移动到包含块的外边。

绝对定位

接下来我们了解一下绝对定位的详细细节。

基本的绝对定位

一个元素被设置为绝对定位时，会脱离文档流，然后相对其包含块进行偏移。
一般来说，我们会将一个元素设置为relative来作为absolute元素的包含块，我们看看下面的例子：
HTML代码