css第五天--定位

1.为什么使用定位？

   一般元素需要设置层级或者需要设置特殊的位置的时候，需要设置定位

2.定位包括哪些内容？

   定位模式+边偏移

   2.1边偏移

      top  right bottmom  left

  2.2定位模式

     静态定位： static

              特点：静态定位不能使用边偏移

                        静态定位不能设置元素的层级 z-index

                        它是元素的默认方式，不脱离标准流

     相对定位：relative

              特点：相对定位的元素参考的是自身在标准流中的位置进行定位的

                        相对定位的元素在页面中保留位置，不脱离标准流

                        可以设置z-index

      绝对定位：absolute

            特点：绝对定位的元素参考的是距离最近的设置了定位的（相对/绝对/固定）的父元素对齐。

                     绝对定位的元素在页面中不保留位置，完全脱离标准流

                     绝对定位的元素显示模式发生改变，变成行内快元素的显示模式

                     可以设置z-index

                    会随浏览器的滚动条进行滚动

                   设置了绝对定位的元素，不用考虑外边距合并的问题

          绝对定位的用法：

                    子绝父相

                    定位模式的盒子水平垂直居中：1边偏移：50%; 2margin自身盒子大小的一半

     固定定位：fixed

             特点：

                    完全脱离标准流，在页面中不占位置

                    参考区域是浏览器的可视区进行对齐

                    固定定位的元素不跟随浏览器的滚动而滚动

                    可以设置z-index

                    固定定位的元素也可以改变元素的显示模式（行内块）

                    固定定位的元素不存在外边距合并问题

3层级

          普通元素和浮动元素没有层级

          默认定位的元素层级高于浮动和标准流元素

          设置定位的元素层级默认是0，层级关系是后来者居中，层级顺序有元素HTML书写顺序决定

           z-index数值越大，层级越高，z-index没有单位