CSS基础——定位及背景处理
目录
定位
相对定位
相对定位特点
绝对定位
绝对定位的特点
固定定位
固定定位和绝对定位不同的特点
层级问题
opacity
IE处理
背景
background-image
background-color
background-repeat
background-position
图片整合技术
优点
background-attachment
属性简写（background）
定位
通过定位可以任意的摆放元素
定位指的是将指定的元素拜访到了页面的任意一个位置。
通过position属性来设置元素的定位
可选值：
static：元素没有开启定位（默认值）
relative：开启元素的相对定位
absolute：开启元素绝对定位
fixed：开启元素的固定定位（绝对定位的一种形式）
相对定位
当我们使用了position的relative时候，就是开启了相对定位。
相对定位特点
1、开启了元素的的相对定位以后，而不设置偏移量的话，元素不会有任何变化
2、相对定位是相对于元素在文档流中原来的位置进行定位的
3、相对定位的元素不会脱离文档流
4、相对定位会是元素提升一个层级，会盖住原来的。
5、相对定位不会改变元素的一个性质，内联元素依旧是内联元素，块元素也还是块元素，不会改变
可以通过left、right、top、bottom4个属性来设置元素的便宜来那个
left： 元素相对于其定位位置的左侧偏移量
right： 元素相对于其定位位置的右侧偏移量
top： 元素相对于其定位位置的上侧偏移量
bottom： 元素相对于其定位位置的下侧偏移量
绝对定位
当我们吧position的属性值给他设置为absolute的时候，我们就开启了对元素的一个绝对定位
绝对定位的特点
1、绝对定位开启以后，则元素他会脱离文档流
2、绝对定位开启以后，如果不设置他的一个偏移量，那么元素的位置不会发生任何变化。
3、绝对定位是 相对于离他最近的开启定位的祖先元素来定位的。（一般开启子元素的绝对定位，那么父元素一般会设置相对定位）
假如，所有的祖先元素都没有开启定位，那么他会相对于浏览器窗口来定位的。
4、绝对定位会将元素提升一个层级，盖住其他元素
5、绝对定位会改变元素的性质：
1）、 内联元素会编程块元素；2）、块元素的宽度和高度默认都被内容撑开了
固定定位
当我们把元素的position的属性值设置为fixed的时候，则开启了固定定位。
固定定位也是一种绝对定位，大部分特点是一致的。
固定定位和绝对定位不同的特点
1、固定定位永远都是相对于浏览器的左上角定位
2、固定定位会固定到浏览器的某个位置上，不会随着滚动条的滚动而滚动
注意：IE6不支持固定定位
层级问题
1、如果定位元素的层级是一样的，那么下面（纯代码结构的上下）会盖住上面的
2、通过z-index属性我们可以来设置元素的层级。可以通过z-index来设置一个正整数的值，这个值就会被当作元素的层级，层级越高，越优先显示。
3、父元素的层级在高,他也不会盖住我们的子元素
注意：没有开启定位的元素，他是不能去使用z-index的
opacity
设置元素的透明背景
opacity他是可以用来对元素设置背景透明度的一个属性。
他需要设置为一个0——1之间的数值。
0：标识完全透明；
1：标识完全不透明；
0.5：标识半透明
IE处理
opacity这个属性在IE8以下的浏览器无效。需要使用以下属性替代：
filter：alpha（opacity=透明度）；这个透明度是0-100；
0：标识完全不透明；
100：标识完全透明
背景
background-image
使用background-image来设置背景图片
语法：background-image:url(图片相对路径)
此处的相对路径指的是，写在哪，就相对于那个文件夹而言的
1、如果图片背景大于元素，默认会显示图片的左上角
2、如果背景图片和元素同样大， 则会使得背景图片全部显示出来
3、如果背景图片小于元素大小，则会使背景图片平铺展示充满元素
4、可以同时为一个元素指定背景颜色和北京图片，背景颜色将作为背景图片的底色来战士，一般设置背景图片的同时都会设置一个背景颜色。
5、背景图片是贴着左上角显示的。
background-color
他是用来设置背景颜色，这个我们使用很多了。
background-repeat
用来设置背景图片的重复的方式
可选值：
repeat：背景图片他会双方向的进行重复平铺（默认值）
no-repeat：背景图片不重复，有多大就显示多大即可
repeat-x：背景图片沿着水平方向重复
repeat-y：背景图片沿着垂直方向重复
background-position
可以通过这个属性他可以调整我们的背景图片在元素中的一个位置
可选值：
通过top、right、bottom、left、center中的两个值，组合控制一个背景图片的位置
例如：bottom center 下方居中
只写一个值，默认另一个值为center
注意：水平方向一个值和垂直方向一个值。不能同时水平或者垂直
这个方式就相当于是一个九宫格的方式，使用还是有局限性的。
所以我们还提供了偏移量来控制图片定位：
水平偏移量 垂直偏移量 来控制图片的定位信息。
1、如果我们设置了水平偏移量为正值，向右移动，负值则向左移动
2、如果我们设置了垂直偏移量为正值，向下移动，负值则向上移动
这种负值我们在什么时候使用呢？来接下来我们举例说明。
我们经常在网站上看到按钮，鼠标移入和点击鼠标会出席那不同的效果，比如按钮高亮，按钮有电击效果。这是如何实现的呢？其实就是利用了图片，三张不同的图片来设置按钮的北京，鼠标移入切换图片，鼠标单击在切换图片。这时候会出现另外一个问题，就是网络慢的时候会出现图片加载不出来的问题。出现白屏或者闪烁问题。这是什么问题呢？
因为，加载的时候是需要一定的时间的，所以在加载和显示的时候会穿线一段时间背景图片无法显示，这就会导致白屏或者闪烁的问题！
解决这个问题，我们就可以使用我们这个负值的情况了。将三个图片放到一张图片中，当鼠标移入或者点击的时候，通过background-position来切换要显示的图片位置即可。这就用到了负值控制左移动的情况。
图片整合技术
上面就是我们的图片整合技术（CSS-SPRITE）,又称作雪碧图片
优点
1、将我们多个图片整合到一张图片里面，浏览器只需要进行一个请求，就可以同时加载我们需要的多张图片，提高了访问的效率，提高用户的体验度。
2、将多个图片整合到一个图片中，减小了图片的大小，提高了请求的速度
background-attachment
用来设置我们背景图片是否随着屏幕滚动
可选值：
scroll：背景图片随着窗口滚动，默认值
fixed：背景图片会固定在某一个位置，不随着窗口滚动
设置为这个属性的时候，背景图片的定位，永远相当于浏览器的一个窗口
注意：不随窗口滚动的图片，我们一般都是设置给body，而不是设置给其他的元素的。
属性简写（background）
通过该属性可以同时设置所有背景相关的属性。并且没有顺序的要求，谁在前，水灾后完全不受影响。并且没有属性量的要求，不添加的样式就是使用默认的样式
好了，到这里CSS中常用的定位及背景基础知识就搞定了！
欢迎大家点击下方卡片，关注《coder练习生》