CSS的定位讲解

1.四个基本概念

基层：html文档被浏览器解释，遇到块级标签独占一行，遇内联标签则首尾相接。节点与节点之间的空间不可重叠任意流动，基层只有一层。

浮游层：在此层的节点，可以重叠，任意流动。

层数：我们可以指定元素处于第几层。

参考点：浮游层的元素移动，有个前提，参考谁，移动多少？

2.相对定位

position relative;

空间分为左上（left,top）,右上（right,top）,左下（left,bottom），右下（right,bottom）,left带正数向右移，以此类推。

总结：1.基层空间保留

​ 2.以自己的基层空间作为参考点

​ 3.参考点以百分比作为单位时，是指它与父亲（页面）的长度比

3.绝对定位

position absolute

总结：1.一移动基层立马删除

​ 2.以父亲（必须在浮游层，如果没有在浮游层，会继续想上找，找到为止， 找不到就以html容器作为参考点）作为参考点；

​ ——锁定与父亲同层

​ ——-锁定在父亲上面

​ 3.参考点以百分比作为单位时，是指它与父亲（页面）的长度比

4.固定定位

position fixed

总结：1.基层空间立马删除

​ 2.以文档可视区作为参考点

5.为什么absolute和relative 要一起使用

总结：使用这个组合定位，能够实现相对父元素定位。单独使用relative只能相对本身偏移，单独使用absolute只能相对浏览器偏移，absolute受到父级元素是否有position影响。如果父级元素没有position值，则参照浏览器偏移，如果relative、absolute、fixed都行，则以父级元素为参照物偏移。