Web前端——定位position的使用

00定位设置

    <!--

        定位：更高级的布局手段，所有的元素都可以使用定位

            通过浮动，外边距等都不能实现位置效果的时候，就使用定位

     -->

    <!--

        属性：

            position

                取值：static(默认值，没有设置定位)

             相对定位：relative

               参考位置：元素本身初始位置

               特点：不脱离标准文档流

             绝对定位：absolute

               参考位置：离他最近的开启定位的祖先元素，一般情况祖先元素开启的是相对定位

               特点：脱离标准文档流

             固定定位：fixed

               参考位置：浏览器视口

               特点：脱离标准文档流

      -->

    <!--

        定位元素：position值非默认值static

        定位元素的偏移：left bottom top right

       -->

1.粘滞定位

    <!--

        粘滞定位：

           sticky

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

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

     -->

2.绝对定位

     <!--

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

水平方向：

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=包含块内容盒的高度

  同水平方向

-->

3.层级

    <!--

        设置定位元素的层级关系 z-index

        默认定位元素的初始层级为0

        同级的定位元素，后面的会覆盖前面的

     -->