CSS中一般通过浮动和定位来对标签进行位置操作。下面我们来讨论一下定位的用法和需要注意的地方。
1.首先，说一下position的几个属性值
（1）none属性值，这个是定义不进行定位，默认为不定位，这个就不做DOM了
（2）relative属性值，相对定位。相对定位是以自己原来的位置为基础，相对于自己原来的位置进行移动。
现在我们先建立3个div作为素材
代码如下：
效果如下：
现在我们对这里面的名字叫做d2的div进行相对定位操作。
我们加入下述代码：
结果如下：
对上述操作稍加分析可得出以下结论：
1.相对定位 relative，他没有脱离文本流。也就是说，他原来占据的地方还在，把d2稳稳的卡在了下边
2.他定位以后在z轴的显示是高于普通元素的，这个想图层一样，所以红色盖住了蓝色
3.他是相对于自己原来的位置进行移动的
*4.这里提一下，position定位后，使用 top left right bottom进行调整对象的位置，但是margin也是可以调整的。
而且，相对定位的主要作用是来限制绝对定位的，一般不用来调节位置，这个后边咱再说。
以上就是相对定位relative属性值的常用方法。
（3）绝对定位position，和浮动作用类似，不过破坏性更大，使用很灵活。
我们现在修改d2的CSS代码，将其改为绝对定位，代码如下：
其结果如下：
观察上图，我们发现红色的d2跑了，我们的父容器 d 竟然包不住他了，这是怎么回事呢，其实是这样的：
当对一个元素定义绝对定位absolute时，他会脱离文本流，整个会浮起来，不受定义之前任何效果的约束。此时如果用top之类的调整他的位置，这时
这个绝对定位的元素会往上寻找，查看他的父元素有没有使用定位，如果他的父元素或者更上一层的元素有 absolute relative或者fixed任意一个定义过，
那么他就会以这个容器为标准，相对于他进行移动。
现在我们，修改一下代码，试试绝对定位的用法
修改后的CSS代码如下：
显示结果如下：
分析以上现象，我们总结出以下结论：
1.绝对定位会完全脱离文档流，完全浮在其他元素的上边，由图可知蓝色已经占据了原来红色的地方
2.绝对定位会依据他的有定位的祖先容器为标准，这里d这个div有相对定位，所以可以束缚住这个红色的d2。所以d2会出现在现在的位置
3.由图可知，红色是盖住蓝色的，所以据对定位也是会覆盖如同元素
4.当元素的祖先容器都没有定位时，他就说相对于浏览器的content区进行定位
*5.注意： absolute和relative一般都是一起使用的，一般使用据对定位后，都会在他的父容器中加上相对定位，对他进行限制。
这样做的原因是：relative定位后，只要不调top left之类的，这个属性对自身不会有任何影响，但却会限制子容器的绝对浮动
（4）fixed 相对于浏览器定位
我们观察如下代码：
效果如下：
可以看出他是相对于浏览器定位的，但是这个定位，在网页上下滚动的时候，被定位区域是不变化位置的，效果就像被固定在屏幕上一样
以上就是定位的几个常用属性。