相对定位和绝对定位

一定位

1. 静态定位：没用
2. 相对定位：position：relative  参照元素：自己原来的位置
3. 绝对定位：position：absolute  参照元素：父元素
4. 固定定位：position：fixed  参照元素：浏览器的四个窗口

   偏移属性：left   right   top   bottom

left：设置元素距离参照元素的左侧位移，正值往右，负值往左

right：设置元素距离参照元素右侧位移，正值往左，负值往右           

top：设置元素距离参照元素的顶侧位移，正值往下，负值往上      

bottom：设置元素距离参照元素的底侧位移，正值往上，负值往下

二用定位

1. 出现层级时
2. 页面固定广告（位置）       谁想移动位置，给谁定位

三相对定位

1. 偏移属性  水平：left  right          垂直：top  bottom
2. 特性：不影响元素本身的特性      不会使元素脱离正常文档流，也就是还占位
3. 如果没有定位偏移属性，对元素本身没有任何影响；如果有定位偏移属性，则相对于元素原来的位置发生偏移
4. 提高层级

应用场景：微调自己的位置

                  作为绝对定位的参照物

   相对定位参照物是本身的位置

都加定位属性，结构在后的层级比较结构在前的层级大

四绝对定位

1. 如果父元素没有相对定位，会依次往上找，爷爷有相对定位，就参照爷爷的位置定位
2. 特性：

          元素脱离正常文档流，不占位（也脱离文本流，全脱）

          有定位父级相对于定位腹肌发生定位偏移

          如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html）

         能使不能设置宽高的行级元素设置宽高

        提升层级

        如果没有定位偏移属性，对元素本身有影响：如果有定位偏移属性，则相对于父元素发生偏移

3.应用场景：通常配合绝对定位使用结合实例