CSS的三种定位机制。绝对定位是相对谁？设置百分属性时是相对谁？

直入主题：

CSS定位的三种机制：
一.普通流：
  position: static 元素框正常生成，默认设置。
  position: relative  元素相对于它本来的位置，注意：移动后，在原来的位置会占用一个相同大小的空间。
二.绝对定位：
  position：absolute 相对于最近一层的设置了定位的父级元素（除去position:static）（可以向上寻找满足条件的父级元素），
                  在没有设置了定位元素的父级元素时，相对于HTML根元素定位（不是相对于body）
  position: fixed  相对于视窗（浏览器）定位
三.浮动：（只有元素设置或者继承了position: relative,position: static浮动才会生效（其它属性的position，如pisition:flex会让浮动失效））
float: left/right 元素向左/右移动，知道碰到块的边框，或者碰到另一个浮动元素。
  注意：1.浮动后不会占据原来的空间，所有元素都以块级元素展示。
            2.如果浮动框总宽度超过容器，那么浮动块下移。

            3.如果各个浮动的块高度不同，那么可能位置出现错位。（如图）

元素设置百分比属性时，相对于谁：
一:width:
    width的百分比相对于最近一层的父级元素（因为最近一层的父级元素肯定有确定的宽度，所有不用向上寻找）。
    注意：当元素设置了绝对定位之后，相对于最近一层设置了定位的父级元素（除去static）（此时可以向上寻找满足条件的父级元素），在没有设置绝对定位父级元素时，相对于HTML根元素。
二.height:
    height: height的百分比相对于最近一层的父级元素（父级元素高度由内容决定时即auto,则元素的百分比高度不会生效,不会向上寻找父级元素）
    注意：当元素设置了绝对定位后，相对于最近一层设置了定位的父级元素（除去static）（此时可以向上寻找满足条件的父级元素），在没有设置绝对定位父级元素时，相对于HTML根元素。