这次内推项目用到的遮罩及其页面下方button都涉及一个概念position置入值得概念。效果图例如以下：
一个元素position属性不是默认值static。那么该元素被称为定位元素。
定位的元素生成定位框，其定位基于四个特性(置入值)：'top'，'right'，'bottom'，'left'。
如今的问题在于当置入值在声明与否起什么作用。
一、声明置入值得情形
其置入值的參照物即为近期的申明了"position"为"absolute elativefixed的祖先元素。这是通常的情形。
以下看一个样例：
<div style=" 500px; height:500px; background:#000; margin-left:200px;"><div style="position:absolute; left:200px; margin-left:100px; background:#F00; 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;
60%;
z-index:1111;
color: #fff;
background-color: #418cd5;
text-shadow:none;
border:none;
border-radius:0;
}职位详情页底部button栏延伸到三个方向代码：
/*延伸到左右下，设置内容居中，加入一些阴影效果*/
.btn-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background-color: #f0f0f0;
box-shadow: 0 -1px 2px #aaa;
}