一、定位
解决页面上盒子与盒子之间的层叠问题
1、元素的定位属性
边偏移：通过边偏移属性top、bottom、left、right，来精确定义定位元素的位置
定位模式：position属性定义元素的定位模式，position属性常用值：static、relative、abselute、
1、相对定位relative
(1)position:relative;
(2)特点：a、相对自己原来的位置进行位置调整。
b、设置相对定位后，它在文档流中的位置仍然保留。
2、绝对定位（absolute）重点
它可以通过边偏移移动位置，但是它完全脱标，完全不占位置
如果文档可以滚动，绝对定位会随着它滚动
(1)父级没有定位，孩子绝对定位，以浏览器可视区为准对齐，
(2)父级有定位（相对、绝对和固定都可），孩子绝对定位，以父亲为准对齐
(3)绝对定位的盒子没有边偏移的情况：位置不变，不占位置，下面的盒子盖在它的下面
《子绝父相》重点
子级是绝对定位，父亲要用相对定位（父亲用绝对定位的话，就脱离了标准流，会对下面的盒子产生影响）
小技巧：定位的盒子水平居中，首先是left：50%，走父盒子宽度的一般，然后子盒子margin-left 往左走自身盒子宽度的一半
小技巧：定位的盒子垂直居中，首先是top：50%，走父盒子宽度的一般，然后子盒子margin-top 往上走自身盒子宽度的一半
3、固定定位fixed
(1)固定定位是绝对定位的一个特殊形式，以浏览器窗口为参照物
(2)与父亲是否定位无关，只认浏览器
(3)固定定位完全脱标，不占有位置，不随着滚动条滚动
4、静态定位（static）：
(1)经常用来取消定位，以前浮动float：left；何如取消浮动float:none;现在position：relative；取消定位position：static；
(2)所有元素默认定位方式，静态定位没有边偏移，所以不能使用top、left等属性
5、层级 z-index
(1)z-index的默认值是0，取值越大，定位的元素在层叠元素中越居上
(2)取值相同，则根据书写顺序，后来居上
(3)只有相对定位、绝对定位、固定定位由此属性
(4)数字后面不带单位
6、定位模式的转换
(1)如果元素添加了绝对定位和固定定位，想要通栏，则需添加width：100%；
(2)如果元素添加了绝对定位和固定定位，则显示模式转换为行内块模式(相对定位不是这样的,浮动也可以，因为他们三个都脱离标准流了)
7、四种定位总结
1、static：静态定位、不脱标、正常显示模式、不能使用边偏移
2、relative：相对定位、不脱标、占有位置、可以使用边偏移、相对自身位置移动
3、absolute：绝对定位、完全脱标、不占位置、可以使用边偏移、相对于定位父级移动位置
4、fixed：固定定位、完全脱标、不占位置、可以使用边偏移、相对于浏览器移动位置
二、精灵技术sprite
1、产生背景
有效的减少了服务器接受和发送请求的次数，提高页面的加载速度，减小服务器的压力既并发
处理网页背景图像的能力方式
2、制作精灵图
精灵图都是小的装饰图，上不能放背景图，要做插入图片
精灵图的宽度取决于最宽的那个背景图
可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适
精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图
三、心得
1、网页中提取精灵的位置和这个小盒子的绝对定位无关，写法如下：
span {
width: 100px;
height: 105px;
background: url(images/abcd.jpg) no-repeat;
background-position: -123px -12px;
position: absolute;
top: -20px;
left: 100px;
}
2、如果子元素绝对定位但是父亲不定位，则它相对浏览器参考定位，但是它随着滚动条而滚动，固定定位则不同，固定定位也是相对浏览器窗口定位，但是它不随着滚动条而滚动
网友评论