css定位
定位是用来移动元素位置的。
相对位置，参考元素原始位置，偏移某个距离
绝对位置，参考点是最近的有定位的祖先元素，偏移某个距离
定位
1 css定位 相对定位 绝对定位 固定定位
为什么
移动元素
设置元素在包含块中出现的位置，以及遮盖
2 相对定位
position: relative;
参考自己原来的位置，偏移某个距离
* 用途
1 做一些位置微调
2 配合绝对定位使用
* 相对定位的元素不脱标，它原本所占的空间仍保留
top 正数向下 可以理解为：距离原来位置顶边框，距离是100个像素
left 正数向右 距离原来位置左边框，距离是100个像素
right 正数向左 距离原来位置右边框，距离是100个像素
bottom 正数向上 距离原来位置底边框，距离是100个像素
任意组合 从top、bottom选一个 left、right选一个
3 绝对定位
position: absolute
* 绝对定位元素脱离标准文档流
脱标的意思：元素框不在文档流中，与文档流无关了，不占用文档流的空间
* 定位参考点
相对于其包含块：绝对定位的元素，他的参考点相是最近的有定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
c 祖先盒子做参考点
子绝父相最常见的定位手段
最近的有定位的祖先元素：最近的、（无论何种定位 相对可以 绝对也可以 固定定位都可以）、祖先元素做参考
* 绝对定位的元素居中
margin: 0 auto; 不管用 原因适合标准流中有宽度的块元素
只能用margin-left，margin-right
* 应用
90%的压盖效果都是绝对定位做的
4 固定定位
position: fixed;
* 固定定位元素也是脱标
* 参考点： 浏览器的左上角
图片的垂直对齐方式
vertical-align:text-top 跟文本顶部对齐
text-bottom 跟文本底部对齐
z-index属性
1 作用： 负责谁压盖谁
1、 定位的元素能够压住没有定位的（ 默认情况）
2、假如都定位了，html代码后面的盒子压住前面的
div 没有定位
div 绝对定位
div 相对定位
2 使用
* z-index: 数字 数字大的压住数字小的 ,默认值是0,
* z-index只适用于有定位的元素，标准流的元素不能写z-index,浮动的元素也不能写z-index
z-index:-1 可以使定位元素放在标准流元素的后面
* 拼爹现象 见案例
如果父元素都是定位元素，则比较父元素的z-index大小，值大的盖住值小的，
什么是拼爹现象