css五种定位总结

在 CSS 中,定位(Positioning)主要有五种模式,每种模式的行为和特点不同,以下是 staticrelativeabsolutefixedsticky 五种定位方式的对比总结:

1. static(默认定位)

  • 特性 : static 是元素的默认定位方式。元素会按照正常的文档流进行排列。
  • 影响 : 不受 topbottomleftright 属性的影响。
  • 使用场景: 默认状态下不需要特殊定位时使用。

2. relative(相对定位)

  • 特性: 相对自身原本位置进行定位。
  • 影响 : 元素仍然占据原本文档流中的位置,但通过 topbottomleftright 移动其可视位置。
  • 使用场景: 需要稍微调整元素位置,同时保留其在文档流中的位置。

3. absolute(绝对定位)

  • 特性 : 依据最近的非 static 祖先元素(如果没有则相对于 body)进行定位。
  • 影响 : 元素从文档流中移除,不再占据原本的位置。可以通过 topbottomleftright 进行精确定位。
  • 使用场景: 需要完全脱离文档流,并相对其容器进行精确定位时使用。

4. fixed(固定定位)

  • 特性: 相对于浏览器窗口(视口)进行定位。
  • 影响 : 元素脱离文档流,并且在页面滚动时位置保持不变。可以通过 topbottomleftright 进行定位。
  • 使用场景: 固定在屏幕某一位置的导航栏或按钮等场景。

5. sticky(粘性定位)

  • 特性 : 根据滚动位置切换 relativefixed 定位的混合模式。元素在视口范围内时表现为 relative 定位,滚动超出阈值时转换为 fixed 定位。
  • 影响 : 可以通过 topbottomleftright 进行定位,元素在特定的滚动位置"粘住"。
  • 使用场景: 需要在页面滚动时让元素保持可见一段时间,常用于表头、侧边栏等。

总结对比

相关推荐
Mintopia26 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia29 分钟前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo31 分钟前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊36 分钟前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆38 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼39 分钟前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
江城开朗的豌豆44 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..1 小时前
VUE工程化开发模式
前端·javascript·vue.js
_oP_i1 小时前
dify之Web 前端工作流编排(Workflow Builder)
前端·dify
Moment1 小时前
快手前端校招一面面经 🤔🤔🤔
前端·javascript·面试