relative 相对于自身原位置偏移但保留占位；2. absolute 脱离文档流，相对于最近非 static 祖先定位；3. fixed 相对于视口固定，不随滚动移动。
在HTML和CSS中，position 属性用于控制元素的定位方式。常见的取值有 relative、absolute 和 fixed，它们的行为和使用场景各不相同。
position: relative（相对定位）
元素相对于其正常文档流中的位置进行偏移。设置 top、right、bottom、left 会使其相对于原本的位置移动，但原来占据的空间仍然保留。
不脱离文档流 偏移后原位置仍被占用 常用于为绝对定位元素设置参考父容器例如：
设置 top: 10px; left: 20px; 后，元素从原位置向下移动10px，向右移动20px，但原来的位置空着。
position: absolute（绝对定位）
元素脱离文档流，相对于最近的已定位（非 static）的祖先元素进行定位。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
脱离文档流，不占空间 定位基准是最近的 position 不为 static 的父级 常用于弹窗、下拉菜单、图层叠加等场景例如：
在一个 position: relative 的 div 内部设置 position: absolute; top: 0; left: 0; 可使子元素定位到该 div 的左上角。
position: fixed（固定定位）
元素脱离文档流，相对于浏览器视口进行定位，不会随页面滚动而移动。
立即学习“前端免费学习笔记（深入）”；
常用于导航栏、返回顶部按钮等需要始终可见的组件 定位基准是视口（viewport），不是父元素 即使页面滚动，元素位置保持不变例如：
设置 position: fixed; bottom: 10px; right: 10px; 的元素会一直显示在屏幕右下角。
基本上就这些。理解它们的关键在于定位参照物不同：relative 是自身原位，absolute 是最近定位祖先，fixed 是浏览器窗口。
以上就是HTMLpositionrelativeabsolutefixed格式属性区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1578856.html
微信扫一扫 
支付宝扫一扫 
