CSS中的定位

定位的作用？

1.可以解决盒子与盒子的之间的层叠问题

　　定位之后的元素层级更高，可以层叠在其他盒子上面

2.可以让盒子始终固定在页面某个位置（比如导航栏在页面滚动时不动）

 

怎么使用定位?

属性名+属性值

 

属性名：position

属性值：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（flxed）

偏移量名：left、right、top、bottom

偏移量值：数字+px

 

静态定位（position：static）

就是不使用定位的普通文档流

 

相对定位（position：relative）

使用相对定位后的元素是以自身原来的位置进行移动，而偏移量也是根据自身原有位置设置。

相对定位移动后的元素原来的位置并不会消失（没有脱标），他会按照原有的大小在那里占着位置，同时相对定位后的元素也不会被改变自身元素的显示模式。

 

绝对定位（position：absolute）（子绝父相）

绝对定位在文档流中是脱标的。

使用绝对定位的元素会改变自身的显示模式，变成行内块显示模式。可以设置高宽，如果不设置就不显示，也可以随内容撑开。

绝对定位的参照物有两个，有优先级，一般他会先找父级元素中有没有使用绝对定位和相对定位的元素，如果有便以他们为参照物，如果没有就会以浏览器为参照物进行偏移。但是在实际开发中父元素会优先使用相对定位，因为相对定位即使偏移后，原来的位置也是不会脱离文档流的。

 

固定定位：position：fixed

需要配置方向进行移动，在文档流中不占位置（脱档），以浏览器可是区域为参照物，