前言
CSS的position属性对于大多数人来说都是很熟悉的了，但是真正用的时候才发现，理解问题有时候还是太片面了。
官方定义
在W3School上对CSS position属性的定义是：
position属性规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
在仔细看上面的定义的时候，我发现一个平常都忽略的点，
绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型，为了验证这句话，我写了一个简单的例子如下
<!--这里是HTML代码-->
<span id="box"></span>
/*这里是对应的CSS代码*/
#box{
width: 100px;
height: 100px;
border: 1px solid;
}
在上面的例子中，id是box的元素是一个内联的span元素，对于内联元素来说，width，height，padding-top，padding-bottom，margin-top，margin-bottom都不能改变，所以设置的width和height其实是不起作用的，但是，如果给span加一个 position:absolute 或者position:fixed的属性，就会发现，设置的width和height起作用了，span变成了一个块级元素。
一般来说我们想让内联元素变成块级元素采用的方法都是使用display相关的属性，只是不知道使用position也能达到一样的效果。
| 默认值 | static |
|---|---|
| 继承性 | no |
| 版本 | CSS2 |
| JavaScript语法 | object.style.position = "absolute"; |
| 值 | 描述 |
|---|---|
| static | 默认值，没有定位，元素出现在正常的流中，忽略top，bottom，left，right或者z-index声明。 |
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left"，"right"，"top"，"bottom" 属性进行规定 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位，定位方式同上 |
| fixed | 生成绝对定位元素，相对于浏览器窗口进行定位，定位方式同上 |
| inherit | 规定应该从父元素继承position 属性的值 |
我的理解
在上面的说明中，可以总结出以下几点：
- position不是一个继承属性，如果想要子元素继承父元素的position属性则应该使用 position:inherit 进行显式说明。
- 使用absolute进行绝对定位是相对于除static以外的第一个父元素进行定位，这个我想起了之前做过的一个东西：在一个图片的右上角显示一个删除按钮，具体效果如图：
实现过程大概是这样的
<!--这里是HTML代码-->
<div id="box">
<div>测试</div>
</div>
/*这里是对应的CSS代码*/
#box{
width: 100px;
height: 100px;
position: relative;
}
#box img{
width: 100px;
height: 100px;
}
#box div{
background-color: orange;
position: absolute;
width: 50px;
height: 30px;
left: 25px;
top:35px;
}
当然后面看看觉得直接给div设置background-image属性会简单的多，这也是后话了。
- 当position是static的时候不支持z-index等一系列属性，也就是说如果想让一个元素显示在另一个元素上面的时候，可以使用position:relative来代替position:static，只要不使用偏移使元素离开文本流，position:relative和在正常流中展示的情况是相同的。
- 使用position可以完成导航栏一直在页面最上部的效果。
<!--这里是HTML代码-->
<div id="nav">导航栏</div>
<div id="box"></div>
///////////
/*这里是对应的CSS代码*/
#box{
width: 100px;
height: 1000px;
border: 1px solid;
}
#nav{
position: fixed;
top:0;
}
在上面的代码中由于id是box的div的高度很高，所以对浏览器来说会产生滚动条，但是在向下滚动的时候，导航栏一直位于浏览器的顶部。
- 其实left和right，top和bottom如果一起使用会发生冲突，所以最好只使用两对中的其中一个，如果同时声明了top，bottom，bottom属性是不会显示出来的，left和right中，right属性是不会显示出来的。
上面就是我目前对position属性的全部理解了，有什么遗漏的或者理解不对的欢迎指正和补充。祝好～
