1. 什么是CSS中的position属性
CSS中的position属性用于指定一个元素在文档中的定位方式。通过设置position属性，我们可以控制一个元素的布局方式和在文档中的位置。CSS中的position属性有四个值可选：static、relative、absolute和fixed。
2. static定位
当一个元素的position属性设置为static时，它会根据文档流进行普通布局，也就是按照元素出现的顺序依次排列。这是position属性的默认值。
例如：
.static-div {
position: static;
}
对于static定位的元素，无需指定top、right、bottom和left属性，它们对元素位置没有影响。
3. relative定位
当一个元素的position属性设置为relative时，它会相对于自身在文档中的初始位置进行定位。我们可以通过设置top、right、bottom和left属性来调整元素的位置。
例如：
.relative-div {
position: relative;
top: 10px;
left: 20px;
}
对于relative定位的元素，它的位置调整会影响周围元素的布局，但是元素在文档流中的位置会保留。
4. absolute定位
当一个元素的position属性设置为absolute时，它会相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则会相对于文档的初始位置进行定位。
例如：
.absolute-div {
position: absolute;
top: 100px;
left: 200px;
}
对于absolute定位的元素，它会脱离文档流，不会占据空间，其他元素会忽略它的存在。它的位置调整不会影响其他元素的布局。
值得注意的是，如果设置了absolute定位的元素的top、right、bottom和left属性中的任意一个值，那么它会自动变为已定位元素，即使没有明确设置position为absolute。
5. fixed定位
当一个元素的position属性设置为fixed时，它会相对于浏览器窗口进行定位。无论页面如何滚动，它的位置都不会改变。
例如：
.fixed-div {
position: fixed;
top: 50px;
right: 20px;
}
fixed定位的元素会脱离文档流，并且不占据空间。它的位置调整不会影响其他元素的布局。
6. 总结
通过position属性，我们可以控制元素在文档中的定位方式和位置。它共有四个值：static、relative、absolute和fixed。
static定位是position属性的默认值，元素按照文档流进行普通布局。
relative定位是相对于自身的初始位置进行调整，可以通过top、right、bottom和left属性来修改元素的位置。
absolute定位是相对于最近的已定位祖先元素进行定位，如果没有则相对于文档的初始位置进行定位。元素在文档流中不占据空间。
fixed定位是相对于浏览器窗口进行定位，无论页面如何滚动，其位置不变。元素在文档流中不占据空间。
根据具体的布局需求，我们可以灵活地选择合适的position值来满足设计要求。