1、CSS定位(position)
| 类型 | 属性值 |
| 绝对定位 | absolute |
| 相对定位 | relative |
| 固定定位 | fixed |
2、坐标属性（非定位元素不起作用）
- top、left、button、right
z-index（值为整数，数值越大则在前方显示，默认为0。负值会在最下面）
3、绝对定位(absolute)
- 脱离文档流，不占位，跟浮动一样浮动在上面，会覆盖后面一个盒子，默认参照物为浏览器窗口的左上角，一般用父级(
relative)作为参照物作为定位，搭配使用。
4、相对定位(relative)
- 不脱离文档流，占位，默认参照物为此元素的位置
5、固定定位(fixed)
- 脱离文档流，不占位，默认参照物为当前浏览器视窗位置（顶部导航栏、回到顶部按钮）
6、源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0px; margin: 0px; } body { height: 1000px; } .box { width: 500px; height: 500px; position: relative; /* //垂直居中 margin: 0 auto; //水平居中 top: 50%; transform: translateY(-50%); */ top: 50%; left: 50%; /* 往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 */ transform: translate(-50%, -50%); } /* 图片根据父级等比例缩放 */ img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .list { list-style: none; } /* li伪类使用 */ .list>li:first-child { position: absolute; top: 40%; } .list>li:nth-child(2) { position: absolute; top: 40%; right: 0px; } .to_top { position: fixed; right: 100px; bottom: 100px; } </style> </head> <body> <div class="box"> <img src="image.jpg" alt="图片加载失败"> <ul class="list"> <li><img src="arrow-left-circle.svg" alt="图片加载失败"></li> <li><img src="arrow-right-circle.svg" alt="图片加载失败"></li> </ul> </div> <a href="#" class="to_top"><img src="arrow-up-square.svg" alt="图片加载失败"></a> </body> </html>
效果：
