总结一下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等位置数据时,都是相对于父元素的;