fixed元素始终固定在视口，脱离文档流，适用于全局固定组件；sticky元素在滚动到阈值时才吸附，仍占位，适合局部粘附场景。
fixed 和 sticky 是 CSS 中两种常用的定位方式，它们都能让元素脱离正常的文档流并实现固定效果，但在行为和应用场景上有明显区别。
fixed 定位的特点与用法
使用 position: fixed; 的元素会相对于浏览器视口进行定位，不受滚动影响，始终停留在屏幕的同一位置。
完全脱离文档流，不占据原始空间 以视口为参考点，即使页面滚动，元素位置不变 常用于导航栏、返回顶部按钮、悬浮广告等需要始终可见的组件 必须配合 top、bottom、left 或 right 使用才能生效
示例：让导航栏始终在顶部
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
sticky 定位的特点与用法
position: sticky; 是相对定位和固定定位的结合体。元素在滚动到特定阈值前表现为 relative，之后表现为 fixed。
立即学习“前端免费学习笔记（深入）”；
基于父容器的位置计算，不会脱离文档流（仍占位） 只有当滚动到设定的阈值（如 top: 0）时才“粘”在视口上 依赖于其最近的可滚动祖先容器的行为 适用于表格表头、侧边目录、标签页等需临时固定的场景
示例：让表头在滚动时固定在顶部
.table-header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
关键区别总结
fixed 元素完全脱离布局，sticky 元素仍占据原始空间 fixed 始终固定在视口，sticky 只在滚动范围内触发固定效果 sticky 对父元素有要求（不能有 overflow:hidden 等限制），而 fixed 不受影响 sticky 更适合局部“吸附”效果，fixed 适合全局固定显示基本上就这些，选择哪种取决于你希望元素是永久固定还是条件性粘附。
以上就是HTMLpositionfixed和sticky定位的格式属性区别和应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580072.html
微信扫一扫 
支付宝扫一扫 
