定位
将盒子定在一固定位置
组成
定位模式+边偏移
定位模式
static-静态定位(标准流)（相当于无定位）
relative-相对
absolute-绝对（脱标）
fixed-固定（脱标）
相对定位
相对位置
position: relative;
top: 100px;
相对自己的位置移动，原位置保留
绝对定位
相对祖先的位置移动
没有父级或父级没有定位
以浏览器为准进行移动
父级有定位
在最近一位有定位的父亲**的范围内活动
不再占有原位置
子绝父相
固定定位
以可视窗口为参照点
与父元素无关
不占有原先位置
不随鼠标滚动而改变
与版心为参考点
position:fixed
left:50%
margin-left:版心宽度的一半
图片最好套一个盒子
粘性定位（sticky）
=相对+绝对
以可视窗口为参照点（固定)
占有原先的位置（相对）
必须加边偏移才有效
不常用，原因是兼容性差
边偏移
top/bottom/left/right: 80px
定位的叠放次序
使用z-index来控制盒子的前后叠放顺序
选择器{z-index： 1；}
数值越大，盒子越靠上（无单位）
如果数值相同，则后来者居上
绝对定位居中显示
不能使用margin: 0 auto；居中显示
水平居中
div {
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;}
垂直居中
div {
position: absolute;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
}
两步走
盒子移动到父级元素的水平中心位置
盒子移动自身宽（高）度的一半
定位的特殊性
绝对和相对定位
行内元素设置后可直接设置宽度和高度
块级元素添加后，不给宽度或高度，默认大小是内容的大小
脱标的盒子不会触发外边距塌陷
绝对和固定
浮动不会压住下面标准流的文字（会压住一部分标准流的盒子）
绝对和固定会完全压住下面标准流的文字
这是浮动产生的目的是为了做文字浮动
如果一个盒子既有left属性和right属性，则执行left（先上后下，先左后右）
网页布局总结
垂直布局的块级盒子使用标准流布局。
多个块级盒子水平显示使用浮动
定位具有层叠性，元素在某个盒子自由移动
元素的显示与隐藏
display显示隐藏
设置元素如何显示
元素转换
display：block；
display：inline；
display：inline-block；
隐藏对象
display：none；
不再占有原位置
显示对象
display：block；
visiblity
inherit:继承父级属性
visible：显示
hidden：隐藏
继续占有原位置
overflow溢出显示隐藏
针对溢出部分
visible：显示（默认）
hidden：隐藏
auto：在需要时添加滚动条
scroll：滚动条
.box .mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5) url(images/arr.png) no-repeat center;
}
.box:hover .mask {
/* 显示元素 */
display: block;
}