relative、absolute、fixed区别详解

大家好，我们又见面了啊~本文《HTML定位属性区别：relative、absolute、fixed详解》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

relative 相对于自身原位置偏移但保留占位；2. absolute 脱离文档流，相对于最近非 static 祖先定位；3. fixed 相对于视口固定，不随滚动移动。

在HTML和CSS中，position 属性用于控制元素的定位方式。常见的取值有 relative、absolute 和 fixed，它们的行为和使用场景各不相同。

position: relative（相对定位）

元素相对于其正常文档流中的位置进行偏移。设置 top、right、bottom、left 会使其相对于原本的位置移动，但原来占据的空间仍然保留。

• 不脱离文档流
• 偏移后原位置仍被占用
• 常用于为绝对定位元素设置参考父容器

position: absolute（绝对定位）

元素脱离文档流，相对于最近的已定位（非 static）的祖先元素进行定位。如果没有这样的祖先，则相对于初始包含块（通常是视口）。

• 脱离文档流，不占空间
• 定位基准是最近的 position 不为 static 的父级
• 常用于弹窗、下拉菜单、图层叠加等场景

position: fixed（固定定位）

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

• 常用于导航栏、返回顶部按钮等需要始终可见的组件
• 定位基准是视口（viewport），不是父元素
• 即使页面滚动，元素位置保持不变

基本上就这些。理解它们的关键在于定位参照物不同：relative 是自身原位，absolute 是最近定位祖先，fixed 是浏览器窗口。

今天关于《relative、absolute、fixed区别详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于position,fixed,absolute,relative的内容请关注golang学习网公众号！