css五种定位总结
在 CSS 中，定位（Positioning）主要有五种模式，每种模式的行为和特点不同，以下是 static、relative、absolute、fixed 和 sticky 五种定位方式的对比总结：
1. static（默认定位）
- 特性:
static是元素的默认定位方式。元素会按照正常的文档流进行排列。 - 影响: 不受
top、bottom、left、right属性的影响。 - 使用场景: 默认状态下不需要特殊定位时使用。
2. relative（相对定位）
- 特性: 相对自身原本位置进行定位。
- 影响: 元素仍然占据原本文档流中的位置，但通过
top、bottom、left、right移动其可视位置。 - 使用场景: 需要稍微调整元素位置，同时保留其在文档流中的位置。
3. absolute（绝对定位）
- 特性: 依据最近的非
static祖先元素（如果没有则相对于body）进行定位。 - 影响: 元素从文档流中移除，不再占据原本的位置。可以通过
top、bottom、left、right进行精确定位。 - 使用场景: 需要完全脱离文档流，并相对其容器进行精确定位时使用。
4. fixed（固定定位）
- 特性: 相对于浏览器窗口（视口）进行定位。
- 影响: 元素脱离文档流，并且在页面滚动时位置保持不变。可以通过
top、bottom、left、right进行定位。 - 使用场景: 固定在屏幕某一位置的导航栏或按钮等场景。
5. sticky（粘性定位）
- 特性: 根据滚动位置切换
relative和fixed定位的混合模式。元素在视口范围内时表现为relative定位，滚动超出阈值时转换为fixed定位。 - 影响: 可以通过
top、bottom、left、right进行定位，元素在特定的滚动位置“粘住”。 - 使用场景: 需要在页面滚动时让元素保持可见一段时间，常用于表头、侧边栏等。
总结对比
原文地址：https://blog.csdn.net/weixin_51943308/article/details/142340343
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！