定位 基础

1、什么是定位

    1、定位：是一种高级的布局手段，

    2、通过position属性设置定位

         可选值：

            static  默认值，没有开启定位

            开启定位：

            relative   开启相对定位

            absolute   开启绝对定位

            fixed      开启固定定位

            sticky     开启粘滞定位

2、定位

    1： position: relative;  开启了相对定位

        1-1：开启后的特点：

           （1）开启相对定位之后，如果不配合偏移量使用，元素是没有任何变化

           （2）相对定位的原点，就是元素原来在文档流中的位置

           （3）开启相对定位后，元素的层级提高了

           （4）开启相对定位，元素的性质不会发生改变，块还是块，行内还是行内，

                     也就是说元素没有脱离文档流

         1-2：偏移量

              left   相对定位位置左侧的偏移量

              right  相对定位位置右侧的偏移量

               top    相对定位位置上侧的偏移量

               bottom  相对定位位置下侧的偏移量

        一般情况下，水平方向的偏移量，垂直方向的偏移量，只用一个值确定

  2、position: absolute; 开启绝对定位

         2-1：开启之后特点：

             （1）开启绝对定位后，元素就会脱离文档流

             （2）开启绝对定位后，元素的性质就发生了改变，不再区分块，行内块，行内元素

             （3）开启绝对定位，元素的层级也会提高

             （4）绝对定位，如果要元素的位置发生改变，依然需要配合偏移量去使用

             （5）绝对定位的原点：相对于其包含块来定位的

        一般情况下，我们给子元素设置绝对定位，同时也会给父元素设置相对定位，

        叫“子绝父相”，但具体情况具体看

          2-1：包含块

             （1）在没有定位的情况下，包含块就是离当前元素最近的祖先元素

             （2）有定位的情况，包含块是离它最近的，开启了定位的祖先元素；

                  如果他的祖先元素都没有开启定位，包含块就是根元素（html），又叫初始包含块

 3：position: fixed;  开启固定定位

          3-1：开启固定定位特点

             （1）元素会脱离文档流，元素的性质也会发生改变

             （2）元素会固定在页面当中，不会随着滚动条的滚动而滚动

             （3）元素的层级也会提高

             （4）元素位置的改变，也需要配合偏移量去使用

             （5）固定定位是参考根标签（浏览器视口）来偏移

        一般情况下：固定定位常用于，广告、固定导航等

 

4：position: sticky; 开启粘滞定位

          4-1：特点：

             （1）不会脱离文档流，元素的性质也不会发生改变

             （2）粘滞定位要配合top值去使用，在没有到达top值之前，元素是随着滚动条滚动而滚动

                       到达指定的top值后，元素就不会随着滚动条滚动而滚动

              （3）粘滞定位的偏移量定位点：是浏览器的视口

        一般使用场景：广告，导航