CSS属性-z-index-元素浮动

CSS属性-z-index
z-index用来设置定位元素的层叠顺序
取值可以是正整数，负整数，0

比较原则
    如果是同级兄弟关系：
        z-index越大，层叠越在上面
        z-index相等，写在后面的那个元素层叠在上面

    如果不是同级兄弟关系：
        各自从元素自己以及祖先元素中，找出最临近的2个定位元素进行比较
        而且这两个定位元素必须有设置z-index的具体数值

    示例：info 比较，找到最近的定位元素 box2，box1进行比较

CSS元素浮动
认识浮动
float属性值：left/right/none
float属性可以制定一个元素应沿着其容器的左侧或者右侧放置，允许文本和内联元素环绕他
绝对定位，浮动都会让元素脱标，实现灵活布局
浮动规则一
元素一旦浮动后，脱离标准流
朝着向左或向右方向移动，直到自己的边界紧贴着包含块，或其他浮动元素的边界为止
示例：
定位元素会层叠在浮动元素上面
元素浮动规则示意图：定位 > 浮动 > 普通

    浮动规则二
        如果元素向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

    浮动规则三
        浮动元素间不能层叠
            如果一个元素浮动，另一个浮动元素已经在那个位置，后浮动的将紧贴着前一个浮动元素。（左浮动找左，右浮动找右）
            如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止


    浮动规则四
        浮动元素不能与行内级内容层叠，行内级内容会被浮动元素挤出
        比如：行内级元素，inline-block元素，块级元素的文字内容

    浮动规则五
        行内级元素，inline-block元素浮动后，其顶部将与所在行的顶部对齐


浮动的案例：解决布局时候出现空格，水平排布的方法（水平布局，一般用flex布局）