CSS定位问题
CSS定位分为 静态定位，相对定位，绝对定位，固定定位
默认不设置情况下为静态定位
position:static 静态定位
position:relative 相对定位
position:absolute 绝对定位
position:fixed 固定定位
相对定位
相对定位，即相对于盒子本身左上角的顶点的距离
left：正值---> 负值<---
top：正值↓ 负值↑
绝对定位
position:absolute
距离最近的有定位的(position：relative|absolute|fixed)父盒子的左上角的距离
如果父盒子都没有定位 则距离body的左上角偏移
绝对定位下 margin auto不生效
固定定位
position:fixed
固定定位下 margin:auto会自动失效
永远按照浏览器可视区域大小定位
一旦定位的位置超过可视区域范围 那么元素将看不见 ，不会随着页面的滚动而滚动
定位脱标问题
设置绝对定位和固定定位都能使元素脱标，一旦脱标需给元素设置宽高，不然会按照内容计算宽高。
z-index的层级属性
z-index：数值 范围 负数到正数
没有单位 哪一个z-index值大哪一个元素在上面
z-index只能针对定位的元素生效
如果是父子元素之间，那么子元素始终会显示在父元素上
子绝父相
使用场景多，以子元素为基准，父元素配合子元素，而设置相对定位，不会令父元素脱标，从而产生问题。所以使用子绝父相。
绝对居中
已经定位的元素 在父元素中如何绝对居中(横向纵向都居中)
第一种：
分开横向居中+纵向居中
top:50%;margin-top: - 自身高度的一半
left:50%;margin-left: - 自身宽度的一半
第二种：
left: 0; top: 0; right: 0; bottom: 0;
margin: auto;
居中问题
横向居中：
text-align:center
行内，行内块，文字，在块元素内居中，给块元素添加该属性
margin: 0 auto;
块元素在块元素内居中，注意，子元素要设置宽度
纵向居中:
line-height
行内元素，单行文字 在块元素内居中 line-height:当前块元素高度
行内块 在块级里面纵向居中
给当前行内块添加 vertical-align:middle
给外部的块级添加line-height:块级元素的高度
块级元素在另一个块级元素里面纵向居中：
1.定位
top:50%
margin-top:-自身高度的一半
2 .子元素设置 margin-top: （父元素高度-子元素高度） / 2
图文混排居中
图片和文字 按照基线对齐 如果想让文字和图片垂直居中，给图片设置vertical-align:center属性即可
精灵图/雪碧图 css sprite
原理：为了减少和服务器之间的交互，把多张小图片缝合翻到一张大图片上。
使用：
width:切割的图片宽度
height:切割的图片高度
background: url() no-repeat -大图上的横向像素 -大图上的纵向像素；
为何是负数？相当于，小图片作为相对定位，大图片作为绝对定位来。默认点在左上角，移动的是大图片的位置。
小问题
浮动元素换行时卡住问题 设置元素左浮 ，元素位置不变。可能是被上面的元素高度挡住导致元素被卡住。