it编程 > 网页制作 > Css

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

28人参与 2025-06-17 Css

css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关系。以下是 static、relative、absolute、fixed、sticky 的详细对比和应用场景:

1. static(默认值)

<div class="box">static(默认)</div>

2. relative(相对定位)

.box {
  position: relative;
  top: 10px;  /* 向下偏移 10px */
  left: 20px; /* 向右偏移 20px */
}

3. absolute(绝对定位)

.parent {
  position: relative; /* 作为子元素的定位基准 */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

4. fixed(固定定位)

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

5. sticky(粘性定位)

.header {
  position: sticky;
  top: 20px; /* 当滚动到距视口顶部 20px 时固定 */
}

对比总结

定位方式脱离文档流?定位基准常见场景是否支持 z-index?
static默认布局
relative自身原始位置微调位置、作为定位容器
absolute最近的定位祖先或视口弹出层、浮动元素
fixed视口固定导航栏、悬浮按钮
sticky否(阈值前)最近的滚动祖先或视口吸顶效果、动态固定元素

关键区别

实际应用技巧

到此这篇关于css中的static、relative、absolute、fixed、sticky的应用与详细对比的文章就介绍到这了,更多相关css static、relative、absolute、fixed、sticky内容请搜索代码网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持代码网!

(0)

您想发表意见!!点此发布评论

推荐阅读

CSS place-items: center解析与用法详解

06-17

CSS中前端单位 px、vw、vh 等的区别与使用建议

06-16

CSS普通流、浮动与定位网页布局三大机制及最佳实践

06-19

css实现角标效果并带有文章或图标效果(完整代码)

06-19

CSS3打造的现代交互式登录界面详细实现过程

06-20

ubuntu终端打不开怎么办? 修复Ubuntu无法打开终端问题的方法

06-14

猜你喜欢

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论