一.定位
1.作用：
灵活地改变盒子在网页中的位置
2.实现：
（1）.定位模式：
position
（2）.边偏移：
设置盒子的位置（left，right，top，bottom）
3.相对定位：
（1）.特点：
①：改变位置的参照物是自己原来的位置
②：不脱离标准流的控制，仍然是占位的
③：标签显示模式的特点是不变的（原来是什么样的显示模式，之后仍然是这样的显示模式）
（2）.产生作用的方式
①：设置position:relative
②：设置边偏移
两者必须都进行设置，否则不会生效
4.绝对定位：
（1）.定位的使用场景：
子级设置绝对定位，父级设置相对定位
（2）.特点：
①：脱离标准流的控制，不占位
②：参照物：先找最近的已经定位的祖先元素，如果所有的祖先元素都没有定位，那么参照浏览器可视区域进行定位
③：绝对定位会使显示模式的特点改变为宽高生效的模式（具备了行内块的特点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 400px;
}
.news {
/* 父级中设置相对定位 */
position: relative;
margin: 100px auto;
width: 400px;
height: 350px;
background-color: #fff;
}
.news span {
/* 在子级中设置绝对定位 */
position: absolute;
/* 不仅要设置position属性，还要设置边偏移 */
right: 0;
top: 0;
display: block;
width: 92px;
height: 32px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 32px;
color: #fff;
}
</style>
</head>
<body>
<div class="news">
<img src="./images/news.jpg" alt="">
<span>展会活动</span>
<h4>世界移动大会</h4>
</div>
</body>
</html>
5.定位居中
（1）.实现步骤：
①：绝对定位
②：水平和垂直的边偏移为50%
③：子级向左，上移动自身尺寸的一半（可以把左，上的外边距设置为尺寸的一半，还可以设置transform属性为translate(-50%,-50%)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
position: absolute;
left: 50%;
top: 50%;
/* 移动图片尺寸的一半 */
/* margin-left: -149px;
margin-top: -220px; */
/* 两者皆可 */
/* transform: translate(-50%, -50%); */
}
</style>
</head>
<body>
<img src="./images/4.jpeg" alt="">
</body>
</html>
6.固定定位
（1）.使用场景：
适用于元素的位置在网页滚动时不会改变的场景下
（2）.使用方式：
①：设置position属性为fixed
②：设置边偏移定位到我们想要的位置上
（3）.特点：
①：脱离标准流的控制，不占位
②：始终固定在相同的位置
③：参照物是浏览器窗口
④：显示模式特点会改变为行内块的特点
7.堆叠层级z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
/* 设置了定位之后两者之间的堆叠层级就出现了 */
position: absolute;
width: 200px;
height: 200px;
}
.box1 {
background-color: blue;
/* z-index的取值是整数，默认是0，取值越大层级越靠上（可以参考权重的概念，取值越大
权重越大） */
z-index: 1;
}
.box2 {
background-color: blueviolet;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
8.总结：
| 定位模式 | 属性值 | 是否脱标 | 显示模式 | 参照物 |
|---|---|---|---|---|
| 相对定位 | relative | 否 | 保持标签原有显示模式 | 自己原来的位置 |
| 绝对定位 | absolute | 是 | 行内块特点 | 已经定位的祖先元素或浏览器可视区域 |
| 固定定位 | fixed | 是 | 行内块特点 | 浏览器窗口 |
二.CSS Sprites（精灵）
1.作用：
CSS Sprites是一种网页图片应用处理方式，把网页中一些背景图片整合到一张图片文件中，再通过background-position精确地定位出背景图片的位置
2.使用CSS Sprites的优点：
减少服务器被请求的次数，减轻服务器的压力，提高页面加载速度
3.实现步骤
（1）.创建盒子，盒子的尺寸要设计得与小图的尺寸相同
（2）.设置盒子背景图为Sprites图
（3）.添加background-position属性改变背景图的位置
①：使用PxCook测量小图片左上角的坐标
②：取负数坐标为background-position属性值（向左上移动图片的位置）