position的absolute与fixed共同点与不同点

这个问题面试被问到过~~

A：共同点：

1.改变行内元素的呈现方式，display被置为block；

2.让元素脱离普通流，不占据空间；

3.默认会覆盖到非定位元素上

 

B不同点：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。  

 

典型应用案例：

加了遮罩的居中弹窗，假如有很多屏，就得使用fixed，不然向下滚动弹窗和遮罩不会跟着走。

<input type="button" value="请点我"/>
<div class="bg"></div>
<div class="center"></div>

*{margin: 0; padding: 0;}
body{height: 6000px;}
.bg{background: #000; opacity:0.5; filter:alpha(opacity=50); width: 100%; height: 100%; top:0; left:0; position: fixed;}
.center{width: 500px; height: 500px; background: #fff; position: fixed; top:50%; left:50%; margin-left:-250px; margin-top:-250px;}