1. 什么是position属性
在CSS中，position属性用于设置元素的定位方式。通过设置不同的position值，可以使元素以不同的方式进行定位，并在页面的布局中产生不同的效果。
常用的position属性值有四个：static、relative、absolute和fixed。
2. static定位
static定位是position属性的默认值，元素遵循正常的文档流，不会应用任何定位。
3. relative定位
relative定位使元素相对于其正常位置进行定位。相对于正常位置移动的偏移量由top、right、bottom和left属性来控制。
示例代码：
position: relative;
top: 10px;
left: 20px;
在这个例子中，元素相对于其正常位置向下移动了10像素，向右移动了20像素。
4. absolute定位
absolute定位使元素相对于其最近的非定位父元素进行定位，如果最近的非定位父元素不存在，则相对于根元素进行定位。
与relative定位不同的是，absolute定位会脱离正常文档流，不占据原来的空间，并且其他元素会根据绝对定位的元素调整位置。
示例代码：
position: absolute;
top: 50px;
right: 0;
在这个例子中，元素相对于其最近的非定位父元素向下移动了50像素，并且距离其最近的非定位父元素的右边缘为0。
5. fixed定位
fixed定位使元素相对于浏览器窗口进行定位。无论浏览器滚动条如何滚动，元素始终保持在固定的位置。
示例代码：
position: fixed;
top: 0;
left: 0;
在这个例子中，元素相对于浏览器窗口的左上角进行定位。
6. position属性的小结
通过position属性，我们可以灵活地控制元素在页面上的定位方式。不同的position值可以实现不同的效果，使页面布局更加多样化。
需要注意的是，使用定位属性时，建议使用top、right、bottom和left属性来调整元素的位置，而不是通过改变元素的宽度和高度，以免影响其他元素的布局。