一、相对定位的练习
相对定位即相对自己本身的位置进行定位来改变位置，相对定位常用的场景就是微调位置，这是因为相对定位是不脱离标准流的，常用的应用场景有：
- 相对定位用来微调元素自身的位置
- 提升自身的层级
- 相对定位元素，可以作为绝对定位的参考盒子
比如我们想实现这样一个幂次计算的公式 3的2次方加上2的3次方等于17，使用绝对定位该如何实现呢？
首先创建 HTML 页面，将基本的结构搭建出来，并对公式中的数字进行字体样式的设置；具体的 HTML 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/*设置盒子中的内容居中*/
text-align: center;
font-size: 20px;
}
/*幂次数的大小设置小一点*/
span {
font-size: 12px;
}
</style>
</head>
<body>
<div>
3<span>2</span> + 2<span>3</span> = 17
</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
公式中的所有内容设置完成之后，接下来我们就需要来微调幂次的位置了，从底部调整到顶部，使用绝对定位的方式，具体代码如下：
span {
font-size: 12px;
position: relative;
bottom: 8px;
}
刷新 HTML 页面，具体效果如下：
相对定位可以相对自身位置进行位置调整，并且不会脱离标准流，原先占据的位置会被保留，也就不会对其他元素的位置造成影响。
相对定位的居中
在之前的文章中有总结过居中的实现方式，第一种是针对行内级元素在其父元素中设置 text-align: center;；第二种是针对块级元素在要居中的块级元素中设置 margin: 0 auto; 也可以实现居中。
除了上述两种方式外，使用相对定位时也能实现居中；首先搭建 HTML 结构，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 300px;
background-color: #f00;
}
.box {
width: 300px;
height: 200px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
那么如何让绿色盒子居中呢？
首先来设置相对定位，并将绿色的盒子向右移动父元素宽度的一半，可以通过设置 margin-left: 50% 来实现，这里 margin-left 百分比数值相对的是父元素：
.box {
position: relative;
width: 300px;
height: 200px;
background-color: #0f0;
/*向左移动父元素的一半,使用 margin 实现，相对于父元素*/
margin-left: 50%;
}
刷新页面，效果如下：
接着通过定位中的 right 属性再将绿色盒子向左移动自身宽度的一半，具体代码如下：
.box {
position: relative;
width: 300px;
height: 200px;
background-color: #0f0;
/*向左移动父元素的一半,使用 margin 实现，相对于父元素*/
margin-left: 50%;
/*再向左移动当前盒子的一半*/
right: 150px;
}
刷新页面，效果如下：
除了使用 left 属性外，为了避免偏移值写死，我们还可以使用 transform 来实现，具体代码如下：
.box {
position: relative;
width: 300px;
height: 200px;
background-color: #0f0;
/*向左移动父元素的一半,使用 margin 实现，相对于父元素*/
margin-left: 50%;
/*再向左移动当前盒子的一半*/
/* right: 150px; */
/*也可以实现向左移动当前盒子的一半，优势是不必将移动的距离写死*/
transform: translate(-50%);
}
刷新页面，效果如下：
二、固定定位的练习
固定定位的使用场景非常多，比如各种页面中的左右侧边栏，都是固定的，也都是使用固定定位实现的，比如掘金首页的右侧目录和左下角的工具栏都是使用固定定位实现的。
我们来使用固定定位实现相同的效果，首先创建一个 HTML 页面，包含两个 div 按钮，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="handle">
<div class="item top">顶部</div>
<div class="item feedback">反馈</div>
</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
接着给这两个盒子添加样式，让他们变成按钮的形式，具体的 CSS 代码如下所示：
.handle .item {
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: brown;
color: white;
cursor: pointer;
border-radius: 8px;
}
.handle .feedback {
margin-top: 10px;
}
刷新 HTML 页面，效果如下：
接着就可以设置固定定位相关的样式了，使用 position: fixed 来实现固定定位，具体 CSS 代码如下：
.handle {
position: fixed;
right: 30px;
bottom: 30px;
}
刷新 HTML 页面，效果如下：
可以看到这两个按钮被固定在右下角的位置，即使在包含滚动条的情况下，上下滑动滚动条的时候这两个按钮也会保持这个位置。
