定位

分类

静态定位（Static）

• 定义：默认生成， 一般元素的定位都是静态定位

相对定位 (Relative)

• 定义：元素相对于自身（0，0）点偏移设定的距离，元素保持未定位的形状，但原本占用空间仍保留
• 用法

.top{
  background-color: blue;
  position: relative;
  top: 50px;/*设置top元素相对于自身原本位置向下偏移50个像素*/
}

绝对定位（Absolute）

• 定义: 若父标签没有定位，或者没有父标签，则已当前屏幕为准对齐。若父标签有定位，则依据最近已有定位的父元素为准对齐，类似OC中的传递链，会一层层向上查找有定位的父标签，屏幕为最后一层标签 元素保持未定位的形状，原本占用空间不保留，类似浮动
• 用法：

.son{
    height: 200px;
    width: 200px;
    background-color: pink;
    position: absolute;/*若父标签有定位 则依据最近已经有定位的父元素为基准点*/
    left: 50px;
    top: 50px;
    }

绝对定位与浮动的区别

• 绝对定位才是真正意义上的脱标，浮动不会浮动文字

子绝父相

子标签定位使用绝对定位，父标签定位使用相对定位。子视图要相对于父视图移动，又不需要占用空间，所以子视图使用绝对定位，若父视图使用绝对定位，则父视图不在占用空间，那么会遮盖其他元素，所以父视图要使用相对定位，占用空间。