CSS定位是一种CSS布局方式，通过定位属性（position）可以控制元素在网页上的排列方式。
静态定位（static）
这是元素的默认定位方式。它根据文档流自动排列在页面上。
相对定位（relative）
元素的定位相对于它在正常流中的位置进行。设置top、bottom、left和right属性会使元素相对于其正常位置“偏移”。
.card{
position: relative;
top: 150px;
}
绝对定位（absolute）
元素的定位相对于最近的已定位父级元素（也就是设置了position属性的元素）。如果没有已定位的父元素，那么它的位置相对于初始包含块。
<div class="card-con">
<div class="card">
内容
</div>
</div>
.card-con {
position: relative;
}
.card {
position: absolute;
top: 10px;
left: 10px;
}
距离上面和左面都是10px，它会覆盖其他兄弟元素。
固定定位（fixed）
元素的定位相对于浏览器窗口是固定位置，即使页面滚动，它也依然停留在相同的位置。
.card {
position: fixed;
top: 0;
left: 10px;
}
不管滚动到哪里，它都是距离上面0px。
粘性定位（sticky）
元素在滚动范围内相对于近的祖先元素可视范围定位，就像元素是相对定位的一样，直到元素的位置在视口内超过一个特定的阈值（例如，底部的边距超过10px）时，元素的位置就变成像是固定定位的。
.card{
position: sticky;
top: 80px;
}
在没有达到阈值时，它会随着文档流排列。
达到阈值时，它会悬浮在距离上面80px的位置
