需要定位：
1.某个元素可以自由的在一个盒子里面移动位置，并且压住其他的盒子
2.固定某个元素
定位：把一个盒子定在某个位置（摆盒子）
定位=定位模式+边偏移
1.定位模式
通过position属性来设置
常用的值有：static relative absolute fixed
2.边偏移就是盒子移动到最终位置。有top、bottom、left、right四个属性
1.1静态定位static（是默认的定位方式，按照标准流摆放位置）
1.2相对定位relative
（1）元素在移动位置的时候，相对于原来的位置来说的（参照原来的位置）
（2）原来在标准流的位置继续占有，（不脱标）后面的盒子仍然一标准流的方式对待它
1.3绝对定位absolute
（1）元素在移动位置的时候，是相对于它祖先元素来说的（如果没有祖先元素或者祖先元素没有定位，则会以浏览器文档为标准）
（2）如果祖先元素有定位，则会以最近一级的有定位的祖先元素作为参考点而移动位置
（3）绝对定位不再占有原来的位置（脱标）
子绝父相：子级使用绝对定位那么父级得使用相对定位
1.4固定定位fixed
（1）以浏览器的可视窗口作为参照点
（2）跟父元素没关系
（3）不会随着滚动而滚动
（4）固定定位也不会占有原来的位置（脱标）
固定定位小技巧：固定在版心右侧
（1）先让固定定位的盒子left: 50%;相当于走到了浏览器可视区域的一半位置
（2）然后再margin-left： 版心宽度一半距离;
定位的叠放次序（通过z-index: 数字;设置叠放次序）
数值可以是正（负）整数、0、默认的是auto---数值越大盒子越靠上
1.5扩展
1.绝对定位盒子居中
水平居中：（1）left: 50%;（2）margin-left: 负值;走自身盒子一半距离
垂直居中：（1）top: 50%;（2）margin-top: 负值;走自身盒子一半距离
2.定位特殊特性
（1）行内元素添加绝对或者固定定位，可以直接设置宽、高
（2）块级元素添加绝对或者固定定位，如若不给宽、高，则默认是内容的宽、高
（3）绝对定位（固定定位）会完全压住盒子（会压住标准流的全部内容）
---而浮动的盒子不会压住下面标准流的文字
为什么需要精灵图（sprites）？
有效的减少服务器和发送请求的次数，提高页面加载速度
核心原理：将网页中的小背景整合到大的中
精灵技术主要针对背景图片的使用，把多个小背景图整合到大图片中
主要使用的是background-position；
例如：
<style>
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(../images/sprites.png) no-repeat -182px 0;
}
</style>
<body>
<div class="box1"></div>
</body>
2693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
