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 进行定位,元素在特定的滚动位置"粘住"。
  • 使用场景: 需要在页面滚动时让元素保持可见一段时间,常用于表头、侧边栏等。

总结对比

相关推荐
源猿人11 分钟前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾11 分钟前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
xw51 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 小时前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒2 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding2 小时前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖2 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花2 小时前
i18n国际语言化配置
前端
编程贝多芬3 小时前
Promise 的场景和最佳实践
前端·javascript