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;}