实践一下css中的position属性

总结一下position属性的各种值，直接开始

1.position：static

没有定位，处于上下文中，或者说是文档流中，从下面两幅图中我们可以看到，它会忽略left、right等属性（z-index也会忽略，这里不再实验）；

如果给word外面加一层div，下图所示：它会相对于父元素进行margin-left：20px，这就是上面说的他在文档流中；

2.position：absolute

我们从页面可以看到，abs的div和word的div重合了，这也就是说，absolute绝对定位是会脱离文档流的；

且看到它的起始位置也在content后，官网上说是第一个不是static的父元素，那我们设置一个left：10px看一下，它的位置是变成了相对于body的位置，也就是说，没有定位也是static定位；

然后我们在给abs外面套一个有relative定位的元素，并且给他left设置为10，我们来看看结果：

果然absolute的定位就相当于相对于id=re的div元素，向右10px；

所以记住，absolute是相对于有定位且非static定位元素的绝对定位；

且普通div没有poisition的也是static定位；

3.position：relative

相对于上面例子我们来说一下相对定位，这个比较好理解，我们给relative定位外层包裹一个absolute定位abs2放在body下方，这里为什么相对于body，不用我多说了，是因为content也是static定位，

我们测试调整abs2的bottom值，re的红色色块，会随着botttom大小而上下移动，这就意味着，relative是相对于父元素进行定位的，就是这样；

4.position：fixed

给content下设置一个fi的div，position为fixed，初始位置我们能看到，也是相对于content的，我们给他设置一下right和bottom看一下，可以看到，这个蓝色圆形，是相对于浏览器的；

为了防止它是相对于本页面的，我们是给body一个5000的高度，看到一下它的位置，如下图：

总结一下：

position：static==>就是没有定位普通的元素标签也是static定位，在文档流中；（left等无效）

position：absolute ==>绝对定位，是相对于有定位的且不是static定位的元素来说的；（通过left、right等来定位位置）

position：relative ==>相对定位，就是相对于父元素定位的；（通过left、right等来定位位置）

position：fixed ==>相对于浏览器来说的绝对定位，不会改变位置。（通过left、right等来定位位置）

注意：他们初始化，没有给定left等位置数据时，都是相对于父元素的；