HTML.定位（1）

定位从两个方面来掌握，

            一个方面是如何开启，

            另一个方面，开启定位后，它的特点是什么

      定位：是一种布局的手段，而且是一种高级的布局手段，

     你可以将任何元素，摆放在页面的任意位置

     可以用position来设置定位

       可选值：

          static  默认值，不开启定位

          以下四种定位方式，都属于开启定位

          relative  相对定位

          absolute  绝对定位

          fixed     固定定位

          sticky    粘滞定位 （兼容性略差）  

   

     position：relative  开启了相对定位

      1、如果不设置偏移量，元素的位置是不发生任何变化

      2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置（left：0；top：0）

      3、设置相对定位后，元素的性质是不发生变化

      4、设置相对定位后，元素的层级会提高

      5、设置相对定位后，元素是不会脱离文档流

开启绝对定位

         position: absolute;

      绝对定位后的特点

        1、设置绝对定位后，元素会脱离文档流

        2、设置绝对定位后，元素的性质就会发生变化，就不会再区分块还是行内了

        3、设置绝对定位后，如果不设置偏移量，元素的位置也不会发生变化

        4、绝对定位，它的原点是相对于其包含块来定位的

        5、设置绝对定位后，元素的层级也会提高

      注意：一般情况下，为了更好的控制子元素的位置，

           我们会在开启子元素的绝对定位后，会同步开启父元素的相对定位

           这叫"子绝父相"

     

     包含块

      1、默认情况（没有定位的情况下），包含块就是元素的祖先元素

      2、如果是定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素

         如果祖先元素都没有开启定位，则包含块就是根标签（html）

当元素的position属性设置fixed时，则开启了元素的固定定位

  （1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

  （2）以浏览器为参照物，和父元素没有任何关系；

　（3）固定定位不占有原来的位置，即脱离标准流 ，更改元素的性质

  (4)应用场景

        - 固定导航

        - 固定侧边栏

        - 广告  

 粘滞定位 （一般用于页面导航的吸顶效果)

    -当元素的position属性设置为sticky时，则开启了元素的粘滞定位

    （1）以浏览器为参照物（体现固定定位特点）；

    （2）占有原来位置（体现相对定位特点）,不会脱离文档流，元素性质也不会发生变化；

　　 （3）粘滞定位可以在元素到达某个位置时，将其固定

     (4)配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，

        达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动