【css中position属性详解】-CSDN博客

本文链接：https://blog.csdn.net/Emnational/article/details/147724396

CSS `position` 属性详解

position 属性用于定义元素的定位方式，结合 top right bottom left 和 z-index 属性控制元素位置。

div {
  position: static;
}

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

特性
- 元素脱离文档流
- 相对于最近的非 static 定位祖先元素定位
- 如果没有定位祖先，则相对于 <html> 根元素
- 常用组合：父元素 position: relative + 子元素 position: absolute

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

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

特性
- 混合 relative 和 fixed 特性
- 在阈值范围内表现为 relative，超过阈值后表现为 fixed
- 需要指定 top/right/bottom/left 中的至少一个值
- 兼容性：现代浏览器支持良好（需注意 IE 不支持）

.header {
  position: sticky;
  top: 0; /* 当滚动使元素到视口顶部 0px 时固定 */
}

定位方式	文档流	定位基准	典型应用场景
`static`	保持	-	默认布局
`relative`	保持	自身原始位置	微调元素位置
`absolute`	脱离	最近定位祖先	弹出菜单/图标定位
`fixed`	脱离	浏览器视口	固定导航/广告
`sticky`	保持→脱离	最近滚动祖先视口	吸顶导航/表格冻结标题列