一.定位
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属性值（向左上移动图片的位置）
