一、绝对定位
在CSS中，position: absolute;可以让我们将一个元素相对于它的最近非static的祖先元素进行定位。在下面的示例中，我们将一个具有固定宽高的
元素在其父元素中央进行居中显示。首先需要让父元素相对定位（
position: relative;），然后给要定位的
元素设置绝对定位，再通过设置
top: 50%和left: 50%将其移动到父元素的中心位置，最后通过负距离调整元素的位置。
.parent {
position: relative;
width: 400px;
height: 400px;
border: 1px solid black;
}
.child {
position: absolute;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
top: 50%;
left: 50%;
background-color: red;
}
二、相对定位
除了绝对定位，position: relative;也是一种常用的定位方式。它可以让我们将一个元素相对于其正常位置进行微调。在下面的示例中，我们给一个
三、固定定位
position: fixed;可以让我们将一个元素相对于浏览器窗口进行定位。在下面的示例中，我们将一个具有固定宽高的
元素固定在窗口的右下角，无论页面如何滚动，该元素将始终保持在固定位置。
.fixed-element {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background-color: yellow;
}
四、粘性定位
position: sticky;可以让我们将一个元素相对于它的父元素进行定位，但是当它到达父元素的边缘时，会将自身变为固定定位，保持在父元素边缘。
.sticky-element {
position: sticky;
top: 0;
background-color: green;
}
我是一个粘性元素，当我到达我所在父元素的边缘时，就会保持在这个位置。
