1、定位：position
（注：浮动float浮动页面上、定位position固定于一个位置上。）
定位包括定位属性模式和边偏移两部分
（1）定位模式：选择器{ position：属性值}；
属性值：static默---唯一用处是取消定位
relative相对定位
absolute绝对定位
fixed固定定位
（2）边偏移：top、left、right、bottom
2、相对定位：relative
相对于原来位置进行偏移，以自己的左上角为基点移动，移动幅度又left、right、top、bottom属性来确定，原本占据的空间任然保留。
3、绝对定位：absolute
相对于父容器进行位置定位，父元素必须是有定位（即非static）的容器。如果没有父元素，或者父元素没有定位会以当前屏幕对齐。父级有定位，会根据最近的已经定位（绝对、相对或固定）的父元素进行定位。
元素框从文档流中完全删除，原先的位置会关闭。（和float类似）
注：只有绝对定位是完整意义的脱标，float里面的内容并不会和背景一起浮动上去
子绝父相：子级是绝对定位的话，父级要用相对定位
（1）绝对定位产生的问题：绝对定位的盒子如何水平/垂直居中对齐
用position定位过后的盒子，margin:0 auto;会失效，不能居中对齐了。
所以：首先left：50%，跑到父盒子一半那；然后自己外边距负的一半值margin-left即可。
{ width：200px;
height：200px；
position：absolute；
// 水平：
left：50%；
margin-left：-100px；
//垂直：
top: 50%;
margin-top：-100px；
}
4、3个定位的例子：哈根达斯图片、顺丰导航栏、淘宝轮播图片
5、固定定位：fixed
脱离文档流，不占据位置，位置以浏览器进行定位，无关父级。
6、以上定位之后的特性----定位模式转换
（行内元素无法直接给宽高，要先转变成行内块元素，display:block;inline-block;/position:relative;absolute;fixed/float:left;right）
（行内元素的高度和宽度和内容有关，背景图片在盒子底下，无法撑开，要给宽）
和浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，换为行内模式，因此，如果行内元素添加了绝对定位或者固定定位浮动之后，可以不用转换模式，直接宽高。
如果是一个背景图片，添加了固定定位，有了行内模式之后，要给width的值才会显示。
7、叠放次序：z-index
调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，取值正负整数、0。
无单位，和font-weight一样。
（只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无）
8、一个例子
如果并列的几个盒子hover的时候border显示，因为隔壁的左右border重叠，hover有些盒子只有三边，在hover属性中添加position：relative;即可。