CSS的position属性有哪些值？各自有什么特点？
CSS的position属性是网页布局中非常核心的属性，它决定了元素在页面中的定位方式。通过不同的属性值，我们可以实现普通文档流布局、相对偏移、悬浮固定等丰富的视觉效果。CSS的position属性主要有五个值：static、relative、absolute、fixed和sticky。
1. static（静态定位/默认定位）
这是position的默认值。元素按照正常的文档流进行排列，top、right、bottom、left和z-index属性对其无效。
<div class="static-box">我是静态定位</div>
.static-box {
position: static;
top: 50px; /* 无效，不会产生偏移 */
}2. relative（相对定位）
元素仍然处于正常的文档流中，但可以通过top、right、bottom、left属性相对于其正常位置进行偏移。偏移不会影响其他元素的位置，其他元素不会填补它偏移后留下的空白。它常常作为子元素absolute定位的参考容器。
<div class="relative-box">我是相对定位</div>
.relative-box {
position: relative;
top: 20px;
left: 30px;
}3. absolute（绝对定位）
元素脱离正常文档流，不再占据空间。它会相对于最近的已定位（非static）祖先元素进行偏移。如果没有已定位的祖先元素，则相对于初始包含块（通常是html或body）进行偏移。常用于弹出层、图标定位等。
<div class="parent"> <div class="child">我是绝对定位</div> </div>
.parent {
position: relative; /* 作为参考容器 */
width: 300px;
height: 300px;
}
.child {
position: absolute;
top: 10px;
right: 10px;
}4. fixed（固定定位）
元素脱离正常文档流，相对于浏览器视口进行偏移。即使页面滚动，元素也会停留在屏幕的相同位置。常用于固定导航栏、回到顶部按钮等。
<div class="fixed-box">我是固定定位</div>
.fixed-box {
position: fixed;
bottom: 20px;
right: 20px;
}5. sticky（粘性定位）
这是CSS3新增的属性值，是relative和fixed的结合体。元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。必须指定top、right、bottom或left中的至少一个阈值，否则视为相对定位。常用于表头吸顶、侧边栏吸附等效果。
<div class="sticky-box">我是粘性定位</div>
.sticky-box {
position: sticky;
top: 0; /* 滚动到距离顶部0px时固定 */
}总结
掌握这五个属性值是CSS布局的基础：static是默认流；relative不脱流，相对自身偏移；absolute脱流，相对最近非static祖先偏移；fixed脱流，相对视口偏移；sticky是相对与固定的混合体。如果您想查看具体的交互效果，可以访问在线演示Demo：www.ipipp.com。