CSS H5 定位

CSS :选择器盒子模型 浮动 定位

 作用： 实现网页布局（移动盒子）

        分类：
                 ☞静态定位（static）
                 ☞绝对定位（absolute）
                 ☞相对定位（relative）

                 ☞固定定位（fixed）

１.1  静态定位（static）

语法：
       position: static
        left| right| top| bottom:  length...
       特点：
          ◆静态定位不能移动盒子。
          ◆静态定位的盒子就是标准流下的盒子

１.1  绝对定位（absolute）（看脸型）

   语法：
                     position： absolute；
                     left| right| top|bottom:  length...
            特点：
                  ◆如果给一个元素设置绝对定位，如果该元素的父元素没有设置定位或者设置了静态定位，那么该绝对定位的元素以body标签为参照进行移动。
                  ◆如果设置了绝对定位的元素，如果该元素的父元素设置了除静态定位以为的其他定位，那么该绝对定位的子元素是以父元素为参照进行移动。
                  ◆绝对定位的元素脱标（不占位置）
                  ◆绝定位可以实现模式转换
            使用场景：
                  ◆在页面中，有盒子压盒子的布局时候，使用绝对定位。

１.1  相对定位（自恋型）

     语法：
              position: relative；
              left| right| top| bottom: length...
         
       特点：
             ◆相对定位的元素，只会以元素原来的位置为参照设置定位进行移动。
             ◆相对定位的元素没有脱标（占位置）
             ◆子绝父相（子元素设置绝对定位，父元素设置相对定位）
     使用场景：
              ◆当子元素设置了额绝对定位，对应的子元素的父元素设置相对定位即可。

１.1  固定定位（死心眼子）（可以称为特殊的绝对定位）

     语法：
                 position: fixed;
                 left| right| top| bottom:  length...
       特点：
                  ◆固定定位的元素只以body标签为参照设置定位。
                  ◆固定定位的元素不占位置（脱标）
                  ◆固定定位可以实现元素的模式转化

１.1  z-index   

  注意：
              ◆只有定位的元素才有层级关系
              ◆设置z-index值的时候，该元素必须是一个定位的元素。
        特点：
                 ◆通过设置z-index值可以改变元素的层级关系
               ◆z-index值的默认值为auto (0)
                 ◆z-index值越大，元素越靠上显示。
               ◆如果z-index值相同，后面的盒子会压着前面的盒子
                 ◆如果元素的父元素设置了z-index值，父元素z-index值越大，元素越靠上显示。