CSS元素浮动（float属性）-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布局）