定位

1、静态定位

介绍：静态定位是默认值，就是之前认识的标准流。

代码：position:static;

注意点：

            ①、静态定位就是之前的标准流，不能通过方位属性进行移动；

            ②、我们之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定；

 

2、相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动；

代码：position:relative;

特点：

         ①、 需要配合方位属性实现移动；

         ②、相对于自己原来位置进行移动；

         ③、在页面中占位置→没有脱标；

应用场景：

              ①、配合绝对定位组CP（子绝父相）；

              ②、用于小范围的移动；

 

3 绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动；

代码：position:absolute;

特点：

         ①、需要配合方位属性实现移动；

         ②、 默认相对于浏览器可视区域进行移动；

         ③、在页面中不占位置→已经脱标；

应用场景：①、配合绝对定位组CP（子绝父相）

(1)、子绝父相介绍：

场景：让子元素相对于父元素进行自由移动。

含义:

       ①、子元素：绝对定位

       ②、父元素：相对定位

子绝父相好处：父元素是相对定位，则对网页的布局影响最小；

（2）、（拓展）子绝父绝特殊场景

场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！

原因：父元素已经有定位，已经满足要求了，如果盲目修改父元素定位方式，可能会影响之前写好的布局。

 

4 固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

代码：position:fixed;

特点：

       ①、需要配合方位属性实现移动；

       ②、相对于浏览器可视区域进行移动；

       ③、在页面中不占位置→已经脱标；

应用场景：让盒子固定在屏幕中的某个位置；

tip：定位的元素会脱离标准流，脱离标准流之后的元素宽高默认由内容撑开；