CSSweb三大定位机制

说明:浮动,定位的目的就是改变元素原有的文档流，进行排版布局
    1.普通流---文档流:网页中写出来得标签元素原本占有的位置就是普通流(文档流)
    **块级元素**会独占一行，**从上向下**顺序排列； 
    常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
    **行内元素**会按照顺序，**从左到右**顺序排列，碰到父元素边缘则自动换行；
     - 常用元素：span、a、strong、em、img等
    2.浮动--float:left(左浮动)/right(右浮动)/none(默认不浮动),能够让元素脱离文档流(完全脱离文档流)
    让盒子从普通流中**浮**起来,主要作用让多个块级盒子一行显示。
    3.定位---position:top,right,bottom,left(各个方向都可以设置偏移量)
    将盒子**定**在浏览器的某一个**位**置——CSS 离不开定位，特别是后面的 js 特效。
        a.static--静态
        b.absolute--绝对定位
            完全脱离文档流，不占位偏移,相对已经定位了的父级元素定位，如果父级元素没有明确定位或者
                没有明确的父级，则相对整个body(整个浏览器页面的左上角为起点)定位(偏移)
                实际开发时，建议父级使用相对定位，自己使用绝对定位
        c.relative--相对定位
            半脱离文档流，占位偏移，相对自己原来的位置偏移
        d.fixed--固定定位,相对浏览器窗口定位
        但凡使用到position属性，就会有层叠关系(所有的元素都使用到position),
        修改层叠关系的属性z-index:;(数字类型，没有单位，值越大，层叠关系越高)

web中方位词：
    top-上，right-右，bottom-下，left-左
    如果设置的是边，默认top为起点，顺时针方向旋转
    如果设置的是角，默认左上角为起点，顺时针方向旋转