html中定位的使用

        定位：更高级的布局手段,所有元素都可以使用定位通过浮动,外边距等都不能实现位置效果的时候,就使用定位

          属性:

             position

        取值:

             static  默认值,没有设置定位

             relative   相对定位    

                偏移时参考位置:元素本身的初始位置

                特点:

                 1.不脱离标准文档流  

                 2.初始位置继续占用

                 3.会覆盖标准文档流里面的文本内容

            absolute: 绝对定位

                偏移参考位置:离他最近的开启定位的祖先元素,如果没有祖先元素开启定位,参考变为body

                特点:

                    1.margin:0 auto ,水平居中和浮动没有效果

                    2.设置绝对定位的元素脱离标准文档流

                    3.原来位置不会继续

                    4.会覆盖标准文档流里面的文本内容

粘滞定位：

 sticky

           参考位置：离父元素的距离，如果离父元素的距离与设置一致，就固定不动

           特点：不脱离标准文档流，原先位置继续占有

绝对定位：

<!--

绝对定位在包含块（参考位置的元素）水平布局

水平方向：

left+margin-left+brder-left+padding-left+width+padding-right+border-right+margin-left+right=包含块内容宽度

可以设置auto：margin-left margin-right width left right

1.都是确定的数值时，和小于包含块的内容盒宽度，多余部分就被right吸收

2.只设置一个auto值：多余位置被设置auto的属性吸收

3.设置二个auto值：

    3.1 margin-left margin-right 水平居中

    3.2 marginleft/margin-right和left/right同时设置时，多余部分给left/right吸收

    3.3 width和left/right同时设置auto时，多余部分给left/right吸收

    3.4 left和right同时设置auto时，多余部分给right吸收

4. 设置三个值：

    4.1 有left/right，多余部分就给left/right吸收

    4.2 同时有left和right时，多余部分给right

   

5. 设置四个值：

    5.1 有left/right，多余部分就给left/right吸收

    5.2 同时有left和right时，多余部分给right

   

6. 设置五个值：

   多余部分给right

     -->

<!-- 垂直方向：

top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块内容盒的高度

  同水平方向

-->