CSS position 各定位详解以及他们的区别

position: static

• 默认值：元素按照正常文档流排列
• 特点：不受 top、right、bottom、left 属性影响
• 使用场景：默认布局，不需要特殊定位

.static {
  position: static;
}

position: relative

• 特点：相对于元素本身在正常文档流中的位置进行定位
• 影响：元素在文档流中的位置仍然保留，其他元素不会填充其空间
• 使用场景：作为绝对定位元素的父容器，或微调元素位置

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

position: absolute

• 特点：相对于最近的已定位祖先元素进行定位
• 影响：元素从文档流中移除，其他元素会填充其空间
• 使用场景：需要精确定位的元素，如弹出框、下拉菜单

.absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

position: fixed

• 特点：相对于视口进行定位，不随页面滚动而移动
• 影响：元素从文档流中移除，其他元素会填充其空间
• 使用场景：固定导航栏、悬浮按钮、模态框

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

position: sticky

• 特点：在滚动到指定位置前表现为 relative，滚动到指定位置后表现为 fixed
• 影响：元素在文档流中的位置仍然保留，直到滚动到指定位置
• 使用场景：粘性导航栏、表格头部

.sticky {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
}

区别总结

定位方式	参考点	是否脱离文档流	滚动行为	主要使用场景
static	正常文档流	否	随页面滚动	默认布局
relative	自身在文档流中的位置	否	随页面滚动	微调位置、作为绝对定位的父容器
absolute	最近的已定位祖先元素	是	随祖先元素滚动	精确定位、弹出层
fixed	视口	是	不随页面滚动	固定导航栏、悬浮按钮
sticky	视口	否（滚动前）/ 是（滚动后）	滚动到指定位置后固定	粘性导航栏、表格头部