在Css中用position属性来进行定位，主要有static.relative.absolute.fixed.sticked.inherit这几个值，而在其中top.left.right.bottom属性又决定了元素的位置。

1. Positon:static

这就是元素在文档流中的当前的布局位置，position的属性默认值也是static，此时给这个元素设置left.right.top.bottom都不会生效。写个简单的例子来理解下：

可以看到虽然我给这个content设置了left和top的属性和属性值但是它并没有发生改变，可见当position=”static”时，left.top.bottom.right这些属性即便给它设置值也不会让元素的位置发生任何改变。

2.Position:relative

当给position设置relative就说明给这个元素设定了相对定位，当给它设置left.right.top.bottom属性的值的时候它就会相对于自身原来的位置发生偏移。同样写个简单的例子来理解下：



第一个图是没设置position=”relative”三个元素在浏览器的显示位置，第二个图是在给第二个元素设置了position=”relative”，并且设置了left=100px。我们可以清晰的看见第二个元素相对于原来自身的位置向左边偏移了100px，所以相对定位是相对于自身的位置进行的偏移而且不会脱离文档流，就算让它偏移到其他的位置，原来元素所占的位置还是会保留。

3.Position=absolute

绝对定位经常和相对定位结合起来使用，当给一个元素设定绝对定位时，如果其父元素没有设置相对定位的话，那就会默认对body进行定位，即相对整个body进行偏移，如果其父元素设置了相对定位，那么就会相对于这个父元素的位置来进行偏移，要注意绝对定位会脱离文档流不会占据位置。举个简单的例子来看看绝对定位和相对定位的应用：


我们可以看到我给conten1设置了一个相对定位，然后给其子元素conten2又设置了一个绝对定位，然后让它向左偏移200px，向上偏移100px。从显示效果来看，可以明显的看到conten2是相对其设置了相对定位的父元素content1进行了偏移。一定要记住设置了绝对定位的元素是脱离文档流的。

4.Postion：fixed

我的理解是相对于整个可视窗口来进行定位，并且如果页面够长的时候，出现竖线的滚动条，无论怎么滚动，其元素的位置都不会发生改变始终固定在那个位置不发生改变。它也是会脱离文档流的，这个比较好理解我就不举例子了，可以自己尝试下就能明白了。

5.Postion：sticky

这个是新的css3属性，目前存在很多兼容性问题，这里就不详细介绍，可以理解成relative和fixed的结合，相对自身偏移，当浏览页面超出其原本显示的范围，还是会固定在整个可视窗口原来的位置显示。

6.Position:inherit

这个就是继承父元素的position属性，不常用就不多做介绍。