CSS的定位——相对定位、绝对定位、固定定位、粘性定位

CSS中的定位属性包括相对定位（Relative Positioning）、绝对定位（Absolute Positioning）、固定定位（Fixed Positioning）和粘性定位（Sticky Positioning）。

1. 相对定位

元素相对于其正常位置进行定位，仍然占据文档流中的位置，但可以通过偏移属性进行微调。

.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

2. 绝对定位

元素相对于其最近的已定位祖先元素（非static定位）进行定位，如果没有已定位的祖先元素，则相对于最近的包含块进行定位。

.absolute {
    position: absolute;
    top: 50px;
    left: 50px;
}

3. 固定定位

元素相对于浏览器窗口进行定位，即使页面滚动，元素仍然固定在窗口的位置。

.fixed {
    position: fixed;
    top: 0;
    right: 0;
}

4. 粘性定位

元素在跨越特定阈值前为相对定位，之后为固定定位。这使得元素可以在页面滚动时在特定位置“粘”住。

.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}