這次內推項目用到的遮罩及其頁面下方按鈕都涉及一個概念position置入值得概念。效果圖如下：
一個元素position屬性不是默認值static，那麼該元素被稱爲定位元素。定位的元素生成定位框，其定位基於四個特性(置入值)：'top'，'right'，'bottom'，'left'。
現在的問題在於當置入值在聲明與否起什麼作用。
一、聲明置入值得情形
其置入值的參照物即爲最近的申明瞭"position"爲"absolute\relative\fixed的祖先元素。這是通常的情形。
下面看一個例子：
<div style=" width:500px; height:500px; background:#000; margin-left:200px;"><div style="position:absolute; left:200px; margin-left:100px; background:#F00; width:50px; height:50px;"></div></div>當設置置入值爲0時，此時內部div位置如下圖：
此時可驗證上述有置入值時，結論正確，這裏內部div參照物爲body元素。
二、未聲明置入值情形
如果絕對定位元素沒有申明置入值，只申明瞭position:absolute，其自身定位以及margin的參照物即爲其最近的塊級、單元格（table cell）或者行內塊（inline-block）祖先元素的內容框。
依然是上述例子，將置入值取消掉，看效果如圖：
此時沒有設置置入值，內部div參照物是上層div，即第一個塊級元素。
通過以上兩個例子，我們知道有置入值和沒有設置置入值是有區別的，區別在於當沒有設置置入值時，瀏覽器會默認給定置入值爲auto。
三、置入值應用
由最上面置入值的示意圖可知，每個置入值都是相對於參照物距離來定位定位元素的。那麼就有一個非常有趣的情形。樂帝設置一個將上述內層div寬度和高度去掉，並設置四個置入值都爲0，按照上述理論，那麼這個div將會參照body填充滿整個body。
如下圖：
上述這個特性常用於設置遮罩，當然此時遮罩層顏色不能這麼花。例如這次項目中用到的遮罩代碼：
.search-area-container {
display:block;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:transparent;
z-index:1100;
}這裏設置的顏色爲透明色。效果圖如下：
菜單欄延伸到底部代碼：
/*設置菜單欄默認隱藏，並向下延伸到底部*/
#search-area{
position:fixed;
left:-60%;
top:43px;
bottom:0;
width:60%;
z-index:1111;
color: #fff;
background-color: #418cd5;
text-shadow:none;
border:none;
border-radius:0;
}職位詳情頁底部按鈕欄延伸到三個方向代碼：
/*延伸到左右下，設置內容居中，添加一些陰影效果*/
.btn-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background-color: #f0f0f0;
box-shadow: 0 -1px 2px #aaa;
}