深入理解CSS中的position属性值
在CSS中，position属性用于确定元素的定位方式，它有五个可能的值：static、relative、absolute、fixed和sticky，理解这些值以及它们的行为是掌握CSS定位的关键。
1. **Static（静态）**
Static是position属性的默认值，当一个元素的position属性被设置为static时，它按照正常的文档流进行定位，也就是说，它不会受到top、bottom、left、right等属性的影响。
div {
position: static;
}
2. **Relative（相对）**
当position属性被设置为relative时，元素会相对于其正常位置进行定位，也就是说，如果你设置了left: 20px，那么元素会向右移动20px，其他元素会像元素仍在其原始位置一样排列。
div {
position: relative;
left: 20px;
}
3. **Absolute（绝对）**
当position属性被设置为absolute时，元素会相对于最近的已定位祖先元素（而非通常的块父元素）进行定位，如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位，绝对定位的元素会脱离文档流，不占据空间。
div {
position: absolute;
top: 20px;
left: 30px;
}
4. **Fixed（固定）**
当position属性被设置为fixed时，元素会相对于浏览器窗口进行定位，即使页面滚动，它也始终位于同一的位置，fixed定位的元素也不占据文档流的空间。
div {
position: fixed;
top: 20px;
left: 30px;
}
5. **Sticky（粘性）**
Sticky定位结合了相对和固定定位的特点，元素在滚动到某个位置之前为相对定位，之后为固定定位，这通常用于创建在滚动到某个位置时始终在视口内的元素。
div {
position: sticky;
top: 20px;
}
理解这些position属性值以及它们的行为是创建复杂布局的关键，通过巧妙地使用这些值，可以精确地控制页面元素的定位和布局。
