CSS定位属性position详解教程

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《CSS定位属性position使用详解》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

答案：CSS中position属性定义元素定位方式，包含static（默认，按文档流布局）、relative（相对原位置偏移，保留占位）、absolute（脱离文档流，相对已定位祖先定位）、fixed（相对于视口固定，不随滚动移动）、sticky（滚动到阈值时在relative和fixed间切换），各类型需配合top、left等使用，正确设置父级上下文可避免布局错乱。

在CSS中，position 属性用于定义元素的定位方式，是实现页面布局的重要工具之一。不同的定位方式会影响元素在文档流中的位置以及是否可以使用 top、right、bottom、left 和 z-index 等属性进行精确定位。

static（默认定位）

这是所有元素的默认值。元素按照正常的文档流排列，top、left 等偏移属性对 static 元素无效。

div {
  position: static;
}

这个 div 会按顺序出现在文档流中，不会受 left 或 top 影响。

relative（相对定位）

元素相对于它原本在文档流中的位置进行偏移。原来的位置仍然被保留，不会影响其他元素布局。

• 使用 top、right、bottom、left 可移动元素
• 常用于微调元素位置或作为绝对定位元素的参考容器

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

该元素向下移动10px，向右移动20px，但原位置空间不变。

absolute（绝对定位）

元素脱离文档流，不占据空间，相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位。如果没有这样的祖先，则相对于初始包含块（通常是视口）。

• 常用于弹窗、悬浮按钮、精确布局控制
• 父元素通常设置为 position: relative 来建立定位上下文

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50px;
  left: 30px;
}

child 元素将相对于 parent 定位，在其内容左上角偏移指定距离。

fixed（固定定位）

元素脱离文档流，相对于浏览器视口定位，不随页面滚动而移动。

• 适合做导航栏、回到顶部按钮等需要始终可见的组件
• 定位基准是视口，不是父元素

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

这个导航栏会固定在页面顶部，滚动时保持不动。

sticky（粘性定位）

行为介于 relative 和 fixed 之间。元素在滚动到特定阈值前表现为相对定位，到达阈值后变为固定定位。

• 必须指定 top、bottom、left 或 right 才能生效
• 常用于表格表头、侧边栏跟随滚动

.header {
  position: sticky;
  top: 0;
}

当页面滚动到该元素顶部接触视口顶部时，它就会“粘”在顶部不动。

基本上就这些。掌握每种 position 的特点和适用场景，能帮助你更灵活地控制网页布局。实际使用时注意父级定位上下文的影响，避免定位错乱。不复杂但容易忽略细节。

好了，本文到此结束，带大家了解了《CSS定位属性position详解教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！