CSS之定位（position）

1.相对定位 position:relative

当给一个标准文档流的盒子设置相对定位，可以发现和原来没什么变化。但我们可以给他设置top:100px left:100px等属性来改变它的位置，那么他到底是根据谁来进行移动的呢。

• 不脱离标准文档流，可以调整元素
• 参考点：以原来的位置为参考点。

2.绝对定位 position:absolute

单独给一个盒子设置绝对定位，相对于非static祖先元素定位，如果没有非static祖先元素，那么以页面根元素左上角进行定位

• 脱离标准文档流，不在页面占位置。
• 层级提高，压盖现象和浮动类似

3.固定定位 position:fixed

• 脱离标准文档流
• 一旦设置固定定位，在页面中滚动网页，固定不变
• 参考点：浏览器的左上角

z-index

默认情况下给元素添加定位后就是z-index:auto产生压盖现象 z-index的取值越大就在上层显示，一般情况下z-index只能给添加定位的属性。