**這次內推項目用到的遮罩及其頁面下方按鈕都涉及一個概念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; } ~~~