static为默认定位，按文档流排列，不受偏移属性影响；2. relative相对原始位置偏移，保留原空间，不脱离文档流；3. absolute脱离文档流，相对于最近已定位祖先元素定位，常用于弹窗和图层；4. fixed固定于视口，不随滚动移动，适合导航和返回顶部按钮；5. sticky结合relative与fixed特性，滚动到阈值后固定，需指定方向属性，多用于表头或侧边栏。掌握各定位是否脱离文档流及参考对象是关键。
在CSS中，position 属性用于控制元素在页面中的定位方式。不同的 position 值会改变元素的文档流行为和定位机制。以下是常用的 position 取值及其使用方法。
static（默认值）
元素按照正常的文档流进行排列，不受 top、bottom、left、right 属性的影响。
大多数元素默认就是 static 定位，不参与任何特殊定位行为。
relative（相对定位）
元素相对于它在正常文档流中的原始位置进行偏移。设置 top、left 等属性会移动元素，但原来的位置仍被保留。
不会脱离文档流 常用于微调元素位置或作为绝对定位元素的参考父容器 示例：div { position: relative; top: 10px; left: 20px; }
absolute（绝对定位）
元素脱离文档流，相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
立即学习“前端免费学习笔记（深入）”；
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 完全脱离文档流，不占据空间 常用于弹窗、悬浮按钮、图层覆盖等场景 示例：.box { position: absolute; top: 50px; right: 0; }
fixed（固定定位）
元素脱离文档流，相对于浏览器视口进行定位，不随页面滚动而移动。
适合做导航栏、回到顶部按钮等需要“固定”在屏幕某处的元素 示例：让一个 div 固定在右下角.back-top { position: fixed; bottom: 20px; right: 20px; }
sticky（粘性定位）
表现像 relative 和 fixed 的结合体。元素在滚动到特定阈值前表现为相对定位，之后变为固定定位。
必须指定 top、bottom、left 或 right 才能生效 常用于表格表头、侧边栏跟随等场景 示例：表头滚动到顶部时固定th { position: sticky; top: 0; background: white; }
基本上就这些。掌握每种定位方式的特点，就能灵活控制页面布局。关键是理解它们是否脱离文档流，以及相对谁定位。不复杂但容易忽略细节。
以上就是css定位position属性如何使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1006055.html
微信扫一扫 
支付宝扫一扫 
