目录
定位
定位指的就是将指定元素摆放到页面的任意位置，通过定位可以任意摆放元素。
通过position属性来设置元素的定位
可选值：
static，默认值，元素没有开启定位
relative，开启元素的相对定位
absolute，开启元素的绝对定位
fixed，开启元素的固定定位（也是绝对定位的一种）
当开启了元素的定位时，可以通过left、right、top、bottom四个属性来设置元素的偏移量
left，元素相对于其定位位置的左侧偏移量
right，元素相对于其定位位置的右侧偏移量
top，元素相对于其定位位置上边的偏移量
bottom，元素相对于其定位位置下边的偏移量
div{
position:relative;
left:100px; /*向左偏移*/
}通常偏移量只需要使用两个（一个水平一个垂直）就可以对一个元素进行定位。
相对定位
当元素的position属性设置为relative时，则开启了元素的相对定位。
1、当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。
2、相对定位是相对于元素在文档流中原来的位置进行定位。
3、相对定位的元素不会脱离文档流（只是显示位置发生了变化，实际位置还在原位置）
4、相对定位会使元素提升一个层次。
5、相对定位不会改变元素的性质，块还是块，内联还是内联。
绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位。
1、开启绝对定位，会使元素脱离文档流。
2、开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。
3、绝对定位是相对于最近开启了定位的祖先元素进行定位的。（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口（严格上讲，是根据初始包含块来进行定位，初始包含块是一个视窗大小的矩形）来进行定位。
4、绝对定位会使元素提升一个层级。
5、绝对定位会改变元素的性质：内联元素变成块元素，块元素的宽度和高度默认都被内容撑开。
固定定位
当元素的position属性设置fixed时，则开启了元素的固定定位。（IE6不支持固定定位）
固定定位也是一种绝对定位，大部分特点跟绝对定位一样。
不同点：
1、永远都会相对于浏览器窗口进行定位。
2、固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动。
元素的层级
如果定位元素的层级是一样的，则下边的元素会盖住上边的。
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级。层级越高越优先显示。
对于没有开启定位的元素不能使用z-index。
父元素的层级再高，也不会盖住子元素
opacity
opacity可以用来设置元素背景的透明，他需要设置一个0~1的值。
0表示完全透明，1表示完全不透明，0.5表示半透明。
opacity属性在IE8及以下的浏览器不支持。
IE8及以下要实现需要使用如下属性代替：
filter:alpha(opacity=透明度);
透明度需要一个0~100的值。
0表示完全透明，100表示完全不透明，50表示半透明。
这种方式支持IE6。
背景
一
background-image
使用background-image来设置背景图片
.box{
background-image:url(xxx.png);
}如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会全部显示
如果背景图片小于元素的大小，则会默认将背景图片平铺以充满元素。
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色。一般情况下，设置背景图片时都会同时指定一个背景颜色。
background-repeat
通过background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
二
background-position
背景图片默认都是贴着元素的左上角显示。
通过background-position可以调整背景图片在元素中的位置。
可选值：
该属性可以使用top、right、left、bottom、center中的两个值来指定一个背景图片
top left 左上
bottom right 右下
center center 居中
等共九个值
如果只给出一个值，则第二个默认是center
也可以直接指定两个偏移量
第一个是水平偏移量
如果指定的是一个正值，则图片向右移动指定的像素
如果指定的是一个负值，则图片向左移动指定的像素
第二个是垂直偏移量
如果指定的是一个正值，则图片向下移动指定的像素
如果指定的是一个负值，则图片向上移动指定的像素
.box{
background-image:url(xxx.png);
background-position: 100px 0px; /*图片水平向左偏移100像素*/
}background-attachment
通过background-attachment设置背景图片是否随页面一起滚动。
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器的窗口。
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素。如果设置给其他元素，当该元素不在窗口时，该固定图片也会随之消失。
简写属性
通过background属性可以同时设置所有背景相关的样式。
没有顺序要求，也没有数量要求，不写的样式就使用默认值
按钮
.btn{
display:block;
width:93px;
height:29px;
background-image:url(xxx.png);
background-repeat:no-repeat;
}
.btn:hover{
background-image:url(hover.png);
}
.btn:active{
background-image:url(active.png);
}注意：
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁。这个闪烁会造成一次不佳的用户体验。
产生问题的原因：背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求。我们外部资源并不是同时加载的，浏览器会在资源被使用才去加载资源。由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁。
解决方法：
.btn{
display:block;
width:93px;
height:29px;
background-image:url(btn.png);
background-repeat:no-repeat;
}
.btn:hover{
background-image:url(btn.png);
background-position:-93px 0px;
}
.btn:active{
background-image:url(btn.png);
background-position:-186px 0px;
}为了解决该问题，我们可以将三个图片整合为一个图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题。然后再通过background-position来切换要显示图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
1、将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提 高访问效率。
2、将多个图片整合为一张图，减小了图片的总大小，提高请求的速度
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
