CSS定位+背景设置

（此为从学习视频中摘抄，如有雷同，纯属巧合）
定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值：
static，默认值，元素没有开启定位
relative，开启元素的相对定位
absolute，开启元素的绝对定位
fixed，开启元素的固定定位（也是绝对定位的一种）

1. 相对定位

   当元素的position属性设置为relative，则开启了元素的相对定位
   1.当开启元素的相对定位后，而不设置偏移量时，元素不会发生任何变化
   2.相对定位是相对于元素在文档流中原来的位置进行定位
   3.相对定位的元素不会脱离文档流
   4.相对定位会使元素提升一个层级
   5.相对定位不会改变元素的性质，块还是块，内联还是内联

   当开启了元素的定位（position属性是一个非static的值）时，
   可以通过left right top bottom四个属性来设置元素的偏移量
   left，元素相对于其定位位置的左侧偏移量
   right，元素相对于其定位位置的右侧偏移量
   top，元素相对于其定位位置的上边偏移量
   bottom，元素相对于其定位位置的下边偏移量

   通常偏移量只需要使用两个，就可以对一个元素进行定位
   一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
   例：

position: relative;
left: 100px ;
top: 200px;

2. 绝对定位

   但position属性值设置为absolute时，则开启了元素的绝对定位

   绝对定位：
   1.开启绝对定位，会使元素脱离文档流
   2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
   3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况下，开启了子元素的绝对定位都会同时开启父元素的相对定位）
   如果所有的祖先元素都没开启定位，则会相对于浏览器窗口进行定位
   4.绝对定位会使元素提升一个层级
   5.绝对定位会改变元素的性质，
   内联元素变成块元素，
   块元素的宽度和高度默认都被内容撑开
   例：

				position: absolute;
				left: 100px;
				top: 100px;

3. 固定定位

   当元素的position属性设置fixed时，则开启了元素的固定定位
   固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
   不同的是：
   固定定位永远都会相对于浏览器窗口进行定位的
   固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

   IE6不支持固定定位
   例：

				position: fixed;
				left: 0;
				top: 0;

4. 层级

   如果定位元素的层级一样，则下边的元素会盖住上边
   通过z-index属性可以设置元素的层级
   可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
   层级越高，越优先显示
   父元素的层级再高，也不会盖住子元素

   对于没有开启定位的元素不能使用z-index
   例：z-index: 10;

5. opacity

   设置元素的透明背景
   opacity可以用来设置元素背景的透明，
   它需要一个0-1之间的值
   0表示完全透明
   1表示完全不透明
   0.5表示半透明
   例：opacity: 0.5;

   opacity属性在IE8及以下的浏览器中不支持
   IE8及以下的浏览器需要使用如下属性代替
   alpha(opacity=透明度)
   透明度，需要一个0-100之间的值
   0表示完全透明
   100表示完全不透明
   50半透明

   这种方式支持IE6，但是这种效果在IE Tester中无法测试
   例：filter: alpha(opacity=50);

6. 背景

   使用background-image来设置背景图片
   语法：background-image: url(相对路径);
   如果背景图片大于元素，默认会显示图片的左上角
   如果背景图片和元素一样大，则会将背景图片全部显示
   如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

   可以同时为一个元素指定背景颜色和背景图片，
   这样背景颜色将会作为背景图片的底色
   一般情况下，设置背景图片都会同时指定一个背景颜色
   例：background-image: url(img/1.png);

7. background-repeat

   用于设置背景图片的重复方式
   可选值：
   repeat,默认值，背景图片会双方向重复（平铺）
   no-repeat,背景图片不会重复，有多大就显示多大
   repeat-x,背景图片沿水平方向重复
   repeat-y,景图片沿垂直方向重复
   例：background-repeat: repeat-y;

8. background-position

   背景图片默认是贴着元素左上角显示
   通过background-position可以调整背景图片在元素中的位置
   可选值：
   该属性可以使用top right left bottom center中的两个值
   来指定一个背景图片的位置
   top left 左上
   bottom right 右下
   如果只给出一个值，则第二个值默认是center

   也可以直接指定两个偏移量，
   第一个值是水平偏移量
       如果指定的是一个正值，则图片会向右移动指定的像素
       如果指定的是一个负值，则图片会向左移动指定的像素
   第二个值是垂直偏移量
       如果指定的是一个正值，则图片会向下移动指定的像素
       如果指定的是一个负值，则图片会向上移动指定的像素
   例：background-position: -50px 100px;

9. background-attachment

   用来设置背景图片是否随页面一起滚动
   可选值：
   scroll，默认值，背景图片随着窗口滚动
   fixed，背景图片会固定在某一位置，不随页面滚动

   不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
   例：background-attachment: fixed;

10. background

    通过该属性可以同时设置所有背景相关的样式
    没有顺序要求，也没有数量要求，不写的样式就是使用默认值
    例：background: #bfa url(img/3.png) center center no-repeat fixed;

    发现在第一次切换图片时，会发现图片有非常快的闪烁
    这个闪烁会造成一次不佳的用户体验
    产生问题的原因：
    背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
    但是外部资源并不是同时加载的，浏览器会在资源被使用时才去加载资源
    一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
    所以hover.png和active.png并不是立即加载的
    当hover被触发时，浏览器才去加载hover.png
    由于加载图片需要一定的时间，所以在加载和显示过程中会有一段时间，背景图片无法显示，导致出现闪烁的情况

    为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题，
    然后再通过background-position来切换要显示的图片位置这种技术叫做图片整合技术（CSS-Sprite）
    优点：
    1.将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
    提高访问效率，提高了用户体验。
    2.将多个图片整合为一张图片，减小了图片的总大小，提高了请求的速度，增加了用户体验

    在IE6中对图片格式png24支持度不高，
    如果图片格式是png24，则会导致透明效果无法正常显示
    解决方法：
    1.可以使用png8代替png24，即可解决问题，
    但是使用png8代替png24以后，图片的清晰度会有所下降

    2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件
    然后在一些简单的JS代码，来处理该问题

例：

		<!--
        	在body标签的最后引入外部的JS文件
        -->
        <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
        <!--
        	再创建一个新的script标签，并且编写一些js代码
        -->
        <script type="text/javascript">
        	DD_belatedPNG.fix("div,img");
        </script>