【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

 文章目录

★  position 的五种类型及基本用法  ★

一、position 属性概述

二、position 的五种类型详解（初学者版）

1. static（默认值）

2. relative（相对定位）

3. absolute（绝对定位）

4. fixed（固定定位）

5. sticky（粘性定位）

三、定位元素的层级关系（z-index）

四、常见问题与注意事项

1. 为什么我的 absolute 元素没有按照预期定位？

2. 如何让 fixed 元素不遮挡其他内容？

3. sticky 在某些浏览器不工作？

4. 绝对定位导致父元素高度塌陷？

五、实践建议

★  relative 与 absolute 嵌套规则  ★

一、relative 与 absolute 多层嵌套的定位规则

二、示例解析：三层嵌套布局

三、关键特性与注意事项

1. 定位基准链

2. 相对定位的特殊性

3. 高度塌陷问题

4. z-index 层级控制

四、实际应用场景

1. 下拉菜单

2. 卡片悬浮层

调试技巧

五、常见错误及修复

★  absolute 与 absolute 嵌套规则  ★

一、嵌套规则：绝对定位的「定位基准链」

二、案例演示：两层absolute嵌套

HTML 结构

效果解析

三、进阶案例：三层嵌套（混合定位类型）

定位基准分析

四、常见场景：为什么需要嵌套absolute？

1. 精准控制多层悬浮元素

2. 复杂图标布局（如叠加徽标）

五、注意事项：避免踩坑！

1. 祖先元素必须是「已定位元素」

2. 层级控制：z-index 的作用

3. 父元素高度塌陷问题

解决方案：

六、总结：absolute嵌套的核心逻辑

★  relative和relative嵌套规则  ★

一、嵌套规则：相对定位的「相对链」

二、案例演示：两层relative嵌套

HTML 结构

效果解析

三、进阶案例：多层嵌套的视觉效果

定位基准分析

四、常见场景：为什么需要嵌套relative？

1. 渐进式微调元素位置

2. 创建视觉层次感

五、注意事项：避免踩坑！

1. 相对定位不影响文档流

2. 与绝对定位混合使用时的区别

3. 性能考虑

六、总结：relative嵌套的核心逻辑

★  三种组合的核心区别  ★

一、三种组合对比

二、组合对比详解

1. relative+relative：微调与层级

2. absolute+absolute：完全脱离文档流

3. relative+absolute：容器内精确定位

三、性能与维护性对比

四、最佳实践建议

1. 优先使用relative+absolute

2. 谨慎使用absolute+absolute

3. 巧用relative+relative

五、常见错误及解决方案

六、总结：如何选择组合？

---

 在日常工作中，我们经常要实现UI的效果图，比如实现下图这样的元素，就需要用到position属性：

虽然现在的组件库很多，但是一些特殊要求，就需要我们自己来完成，看完本文，你一定收获多多！

---

★  position 的五种类型及基本用法  ★

一、position 属性概述

在 CSS 中，position属性就像是网页元素的 “定位控制器”。它决定了元素在页面中如何摆放，以及如何与其他元素互动。理解这个属性是掌握网页布局的关键一步。

二、position 的五种类型详解（初学者版）

1. static（默认值）

• 就像排队一样：static 是元素的默认状态，就像同学们在操场上按顺序排队，每个元素都乖乖地按照代码的顺序一个接一个排列。
• 不能插队：设置了 static 的元素，你无法用top、bottom、left、right这些 “位置指令” 让它移动。它就待在该待的地方。
• 示例：

<div style="border:1px solid red;">我是一个普通的div，position默认是static
</div>
<div style="border:1px solid blue;">我也是，我们会按照代码顺序一个接一个排列
</div>

2. relative（相对定位）

• 先站好队，再微调：relative 定位的元素首先会像 static 一样在正常的位置站好（保留原来的空间），然后你可以通过top、bottom、left、right让它稍微移动一点。
• 不会影响别人：它移动之后，原来的位置还是会被保留，就好像它的 “影子” 还在那里，不会影响其他元素的位置。
• 示例：

<div style="border:1px solid gray; height:100px;"><div style="position:relative; left:50px; top:20px; background:yellow;">我原本应该在左上角，但现在向右移动了50px，向下移动了20px</div>
</div>

3. absolute（绝对定位）

• 脱离队伍，单独行动：设置了 absolute 的元素会完全跳出正常的文档流，就像一个学生从队伍里走出来，站到了操场上的其他位置。
• 以容器为参考：它的位置是相对于最近的一个 “有定位的祖先元素”（即 position 不是 static 的元素）。如果没有这样的祖先元素，就相对于整个页面（浏览器窗口）。
• 会影响布局：因为它脱离了文档流，原来的位置不会被保留，后面的元素会 “挤上来” 填补空缺。
• 示例：

<div style="position:relative; border:1px solid purple; height:100px;"><div style="position:absolute; right:10px; bottom:10px; background:pink;">我相对于紫色容器的右下角定位</div>
</div>

4. fixed（固定定位）

• 像海报一样贴在墙上：fixed 定位的元素会相对于浏览器窗口固定位置，就像你在墙上贴了一张海报，无论你怎么滚动页面，海报都不会动。
• 完全脱离文档流：它不会在原来的位置留下空间，其他元素会当作它不存在。
• 场景：常用于导航栏、返回顶部按钮、广告横幅等需要一直可见的元素。
• 示例：

<div style="position:fixed; bottom:20px; right:20px; background:green; color:white;">我是一个固定在右下角的按钮，无论怎么滚动页面我都在这里
</div>

5. sticky（粘性定位）

• 平时正常，特殊时刻固定：sticky 定位的元素一开始会像 static 一样在正常的位置，但当页面滚动到某个特定位置时，它会突然 “粘” 在那里，就像被胶水粘住一样。
• 需要触发器：你必须通过top、bottom等属性告诉它什么时候开始 “粘住”。比如top:0表示当元素滚动到顶部时就固定在那里。
• 示例：

<div style="height:2000px;"> <!-- 创建一个很长的页面用于滚动 --><div style="position:sticky; top:0; background:blue; color:white;">我是一个粘性导航栏，平时我在正常位置，当你滚动到顶部时我会固定在这里</div>
</div>

三、定位元素的层级关系（z-index）

• 谁在上谁在下：当元素重叠时，z-index 就像 “楼层” 一样，值越大的元素越 “高”，会覆盖在值小的元素上面。
• 只对定位元素有效：z-index 只对设置了position为relative、absolute、fixed或sticky的元素有效。
• 示例：

<div style="position:absolute; left:50px; top:50px; z-index:1; background:red; width:100px; height:100px;">我是元素1，z-index是1
</div>
<div style="position:absolute; left:100px; top:100px; z-index:2; background:blue; width:100px; height:100px;">我是元素2，z-index是2，所以我会覆盖在元素1上面
</div>

四、常见问题与注意事项

1. 为什么我的 absolute 元素没有按照预期定位？

• 检查它的祖先元素中是否有设置了position（除了 static）的元素。如果没有，它会相对于整个页面定位。

2. 如何让 fixed 元素不遮挡其他内容？

• 可以给 body 元素添加padding-top或padding-bottom，为 fixed 元素留出空间。

3. sticky 在某些浏览器不工作？

• 旧版浏览器（如 IE）不支持 sticky。可以使用 JavaScript 实现类似效果，或者添加前缀：position: -webkit-sticky; position: sticky;

4. 绝对定位导致父元素高度塌陷？

• 当所有子元素都设置为 absolute 时，父元素会失去高度。可以通过设置父元素的高度，或者使用position: relative让父元素包含子元素。

五、实践建议

• 动手练习：打开浏览器的开发者工具（F12），在任何网页上修改元素的 position 属性，观察效果。
• 从简单到复杂：先掌握 relative 和 absolute，再学习 fixed 和 sticky。
• 查看案例：在网上搜索 “CSS position 案例”，可以找到很多实际应用的例子。

---

★  relative 与 absolute 嵌套规则  ★

在实际项目中，页面布局中经常用嵌套结构来创建复杂布局，position的类型互相嵌套来完成这样的效果，以下详细的讲解：

一、relative 与 absolute 多层嵌套的定位规则

当relative和absolute定位元素多层嵌套时，子元素的定位基准是最近的已定位祖先元素（即position值不为static的元素）。这种嵌套结构常用于创建复杂布局，如下拉菜单、卡片组件等。

二、示例解析：三层嵌套布局

下面通过一个三层嵌套的例子来说明定位规则：

<div class="grandparent" style="position:relative; height:200px; background:#f0f0f0;"><div class="parent" style="position:absolute; top:50px; left:50px; width:150px; height:150px; background:#e0e0e0;"><div class="child" style="position:absolute; top:30px; right:20px; width:80px; height:80px; background:#d0d0d0;"><div class="grandchild" style="position:relative; top:10px; left:10px; width:50px; height:50px; background:#c0c0c0;">我是曾孙元素</div></div></div>
</div>

层级分析：

1. 曾祖父元素（grandparent）

   • position: relative：建立定位上下文，但不偏移。
   • 作为后续绝对定位元素的参考基准。

2. 祖父元素（parent）

   • position: absolute：相对于.grandparent定位。
   • top:50px; left:50px：从.grandparent的左上角向下、向右偏移 50px。

3. 父元素（child）

   • position: absolute：相对于.parent定位。
   • top:30px; right:20px：从.parent的上边缘向下 30px，右边缘向左 20px。

4. 子元素（grandchild）

   • position: relative：相对于自身正常位置定位。
   • top:10px; left:10px：从自身原始位置向下、向右偏移 10px。

三、关键特性与注意事项

1. 定位基准链

• 绝对定位元素（如.child）会逐级向上查找最近的已定位祖先（.parent）。
• 若所有祖先均为static，则相对于浏览器窗口定位。

2. 相对定位的特殊性

• relative元素仍保留在文档流中，其偏移不会影响其他元素。
• 多层relative嵌套时，每个元素仅相对于自身原始位置偏移。

3. 高度塌陷问题

• 若父元素仅包含绝对定位子元素（如.parent），父元素高度会塌陷为 0。
• 解决方案：

  css

  .parent {position: relative; /* 或设置明确高度 */min-height: 100px;
  }
  

4. z-index 层级控制

• 嵌套元素的层级由最内层元素的z-index决定。
• 示例：

  <div style="position:relative; z-index:1;"><div style="position:absolute; z-index: