定位知识总结

定位：

        是一种布局的手段，而且是一种高级的布局手段，可以将任何元素，摆放在页面的任意位置

    position  设置定位

      可选值

        static    默认值，不设置定位

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

        relative  相对定位

        absolute  绝对定位

        fixed     固定定位

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

   

    position 开启定位

    偏移量

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

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

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

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

一、相对定位

相对定位

     position: relative;   开启了相对定位

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

     2.设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置

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

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

二、绝对定位

position: absolute;  开启绝对定位

    特点：

    1.设置决定定位后，元素会脱离文档流

    2.设置绝对定义后，元素的性质就会发生变化，不区分块元素和行内元素

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

    4.绝对定位的原点是相对于其包含块来定位的。

    5.开启绝对定位后，元素层级也会提高。

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

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

      这叫——子绝父相

补充：

包含块

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

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

       如果都没有开启定位，则包含块就是根标签

三、固定定位

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

         1.用于固定在浏览器页面上，不随浏览器滚动而变化

         2.以浏览器为参照物，和父元素没有关系，原点是浏览器左上角

         3.固定定位脱离文档流，固定定位不占原来的位置

         4.应用场景：固定栏，广告，固定导航

 

 四、粘滞定位

position:sticky;开启粘滞定位

    1.以浏览器为参照物

    2.占有原来的位置，不脱离文档流，性质不变

    3.它是配合top值使用

    4.粘滞定位可以在元素到达某个位置时，将其固定