CSS的position定位深入理解

之前一直对CSS的position定位都是一知半解，这次刻意花了点时间学习了哈，在position定位中主要有：static、relative、absolute、fixed、sticky。

一、static     

这是元素默认的position属性，它会按照源码的顺序决定元素位置的，值得注意的是static定位的元素的top、bottom、left、right都是没有作用的，如：

这里既使将父级div的top属性设置为50px，但却对位置没有影响。

二、relative

relative属性是基于static上（即默认位置上）变化，搭配top、bottom、right、left来实现，总而言之，相对定位是相对于元素原本位置进行偏移的，而且元素不会脱离标准文档流，原本的位置会被保留如：

三、absolute

absolute属性基于上一级元素（即父级元素）位置变化的，同时父级元素不能是static属性，不然定位基点就会以整个html网页作为根元素。

1.若父级元素无定位属性时，其相对于浏览器进行定位

2.若父级元素有定位属性时，其相对父级元素进行定位

3.始终在父级元素范围内进行偏移，其中元素原本在标准文档流中的位置不会被保留。

当父级元素有relative定位属性时

当父级元素无定位属性时

绝对定位不会保留原本的位置

当把所有div子元素都设置为绝对定位

注意上图，不难发现，绝对定位和之前的float浮动有点相似，都会脱离标准文档流，当也有些本质区别，这些不详细赘述了。

四、固定定位

固定定位fixed是相对于整个浏览器页面定位的，与其他定位不同的是，无论浏览器页面怎样移动都不会动。如：