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

总结对比

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript