CSS定位

1.相对定位(position: relative)

注意点:

            1.相当于自己原来的位置在进行偏移

            2.相对定位默认是不脱离标准流的,在页面中始终占位置

            3.相对定位可以设置偏移值

            4.相对定位只适应于小范围的移动

2.绝对定位:( position: absolute;)

 特点:

            1.绝对定位默认是脱离标准流,在页面中不占位置

            2.绝对定位默认参考浏览器进行定位

            3.绝对定位也可以设置偏移值

3.固定定位:(position: fixed;)

注意点:

            1.固定是脱离标准流的盒子

            2.固定定位参考是浏览器来进行定位

            3.固定定位的偏移值指的是浏览器的上下左右

            4.固定定位的元素在固定在一个位置保持不变

 4.粘性定位(position: sticky;)

         粘性定位特点:

        1.这个定位属于标准流

        2.粘性定位,默认状态是(相对定位)滚动时变成(固定定位)的结合体

        3.粘性设置了偏移值,默认是参考浏览器的可视区域进行定位,偏移值需要进行滚动触发

        4.粘性定位如果是给父子关系的子元素添加,滚动范围则是父元素的高度的范围

扩展:子绝父相:将绝对定位和相对定位组合使用(给父元素添加相对定位,给子元素添加相对定位)

 注意:

此时子元素是参考带定位(非静态定位)的父元素移动