关于CSS定位属性 position 的使用

　　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 相对于浏览器定位

　　　　　　　　我们观察如下代码：

　　　　　　　　　　

　　　　　　　　效果如下：

　　　　　　　　　

　　　　　　　　　　　

　　          可以看出他是相对于浏览器定位的，但是这个定位，在网页上下滚动的时候，被定位区域是不变化位置的，效果就像被固定在屏幕上一样

　　　　　以上就是定位的几个常用属性。