定位：
定位是指将元素摆放到页面的任意位置，通过定位可以任意的摆放元素。
通过position属性来设置元素的定位.
可选值：
1. static：默认值，没有开启元素的定位。
2. relative：开启元素的相对定位。
3. absolute：开启元素的绝对定位。
4. fixed：开启元素的固定定位（也是绝对定位的一种）。
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left，right，top，bottom四个属性来设置元素的偏移量。
- left：元素相对于其定位位置的左侧偏移量。
- right：元素相对于其定位位置的右侧偏移量。
- top：元素相对于其定位位置的上边偏移量。
- bottom：元素相对于其定位位置的下边偏移量。
相对定位relative的特点：
- 当开启元素的相对定位以后，二不设置偏移量时，元素不会发生任何变化。
- 相对定位是相对于元素在文档流中原来的位置（没有开启定位时的位置）进行定位。
- 相对定位的元素不会脱离文档流。
- 相对定位会使得元素提升一个层级。
- 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。
**绝对定位的特点：**
- 会使得元素脱离文档流。
- 如果不设置偏移量，元素的位置不会发生改变。
- 绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的（一般情况下，子元素开启了绝对定位都会开启父元素的相对定位）。如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
- 绝对定位会社得元素提升一个层级。
- 绝对定位会改变元素的性质；内联元素变成块元素；块元素的宽度和高度默认都被内容撑开。
固定定位的特点：
固定定位大部分特点和绝对定位一样。
不同的是：
- 固定定位永远都会相对于浏览器窗口进行定位。固定定位会固定在浏览器窗口的某个位置，不会随着滚动条滚动（就像打开网页一直出现在窗口中的广告）。
- IE6不支持固定定位。
元素的层级特点：
如果定位元素的层级是一样的，则下边的元素会盖住上边的元素。
通过z-index属性可以用来设置元素的层级。
可以为z-index指定一个正整数作为值，盖值将会作为当前元素的层级。层级越高，越优先显示。
列：z-index : 10
但是注意：父元素的层级再高也不会盖住子元素。
对于没有开启定位的元素，不能使用z-index。
设置元素的透明背景：
opacity可以用来设置元素背景的透明，用0~1之间的值来表示透明度。0表示完全透明，1表示不透明。
列：opacity: 0.5
opacity属性在IE8及以下的浏览器不支持；需要使用如下属性来代替：
alpha(opacity = 透明度)
透明度用0~100之间的值来表示。这种方式支持IE6，但是这种方式在IE Tester中无效。
背景图片设置：
- 使用backround-image来设置背景图片。
语法：
background-image:url(相对路径)
- 如果背景图片大于元素，默认会显示图片的左上角。
- 如果背景图片和元素一样大，则会将背景图片全部显示。
- 如果背景图片小于元素大小，则会将背景图片平铺以充满元素。
- 背景图片会覆盖背景颜色。
设置背景图片的重复方式：
background-repeat用来设置背景图片的重复方式。
可选值：
- repeat：默认值，背景图片会双方向重复（平铺）。
- no-repeat：不重复，有多大就显示多大。
- repeat-x：背景图片水平方向重复。
- repeat-y：背景图片垂直方向重复。
设置背景图片在元素中的位置：
通过background-position可以设置背景图片在元素中的位置。
可选值：使用top，right，left，bottom，center中的两个值来指定图片的位置。
例如：top left表示左上
如果只给出一个值，第二个值默认是center。
也可以通过设置两个偏移量来指定位置：
第一个值表示水平偏移量
第二个值表示垂直偏移量
例如：
backrround-position:100xp, 50xp;
background-attachment用来设置背景图片是否跟随页面一起滚动。
可选值：
- scroll： 默认值，背景图片跟随页面滚动。
- fixed：背景图片固定在一位置，不跟随滚动。如果设置给body，图片会一直显示在窗口中。图片的定位会一直相对于窗口。
图片整合技术（CSS-sprite）：
在同一个位置切换多个图片时会出现的短暂空白问题从而导致闪烁。解决这个问题可以将多个图片整合为一张图片，就不会出现闪烁的问题了。这种技术叫图片整合技术。一张包含多个图片的图片称为雪碧图。
技术的优点：
- 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片（准确的说是一张图片里包含多张图片）。提高访问效率，提高了用户体验。
- 将多个图片整合为一张图片，减小了图片的总大小。
background简写属性：
通过该属性可以同时设置所有背景相关的样式；没有顺序要求，也没有数量要求。
例如：
backfround : #bfa url(相对路径) center center no-repeat fixed;