1. 相对定位 (relative)：
相对定位是相对于元素在正常文档流中的位置进行定位的。使用相对定位时，元素仍然占据页面上的空间，但可以通过设置 top、right、bottom 和 left 属性来调整元素的位置。
.element {
position: relative;
top: 10px;
left: 20px;
}
2. 绝对定位 (absolute)：
绝对定位是相对于其最近的已定位的（不是 static）父元素进行定位的，如果没有已定位的父元素，则相对于初始包含块进行定位。绝对定位的元素不在正常文档流中，不占据空间。
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. 固定定位 (fixed)：
固定定位是相对于浏览器窗口进行定位的，元素会固定在页面上的某个位置，不随页面滚动而移动。
.element {
position: fixed;
top: 10px;
right: 10px;
}
4. 粘附定位 (sticky)：
粘附定位是相对定位和固定定位的结合。元素在跨越特定阈值前是相对定位的，之后变为固定定位。这通常用于在滚动过程中使元素“粘附”在页面上。
.element {
position: sticky;
top: 0;
}
这些定位属性允许你根据需要调整元素的位置，以实现更复杂的页面布局和交互效果。需要注意的是，滥用定位可能导致布局混乱，因此在使用时应慎重考虑，并确保布局的稳定性和可维护性。
转载请注明出处：http://www.zyzy.cn/article/detail/4008/CSS