CSS基础中属性position的使用方法（新手入门到精通）-CSDN博客

本文链接：https://blog.csdn.net/2401_83607690/article/details/147647129

以下是为小白准备的 ‌CSS Position 属性超详细入门教程‌，结合高频核心知识点与代码示例，帮助快速掌握布局核心技巧：

一、position 基础概念

‌核心作用‌：控制元素在页面中的定位方式。默认情况下，元素按照‌文档流‌顺序排列（从上到下、从左到右），position 属性可以打破这一规则。

一、position 基础概念

二、position 的 5 种常用属性值

二、position 的 5 种常用属性值

1. `static`（默认值）- 静态定位

‌特点‌：元素按正常文档流排列，‌无法‌通过 top/left 等属性调整位
```
.box {
  position: static; /* 可省略不写 */
}
```

2. `relative` - 相对定位

‌特点‌：
1. 元素‌保留原位置‌，
2. 根据自身原始位置偏移，‌
3. 不影响其他元素布局‌，
4. 标签显示模式不变

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

一般工作中不会独立使用，会和其他配合使用

3. `absolute` - 绝对定位

‌核心特性
1. 脱标，不占位
2. 参照物：先找最近的已经定位的祖先元素，如果所有的祖先元素都没有定位，参照浏览器可视区改位置
3. ‌显示模式改变，宽高生效（具备了行内块的特点）

<style>
  .parent {
    position: relative;  /* 父相 */
    width: 400px;
    height: 300px;
    border: 2px solid #666;
  }
  .child {
    position: absolute;  /* 子绝 */
    right: 20px;
    bottom: 20px;
    width: 100px;
    height: 100px;
    background: #ff6b6b;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

效果如下：

典型应用场景‌
- 创建悬浮菜单、弹窗等脱离常规布局的组件，

示例代码（定位居中）

 .parent {
    position: relative;  /* 父级需设置非 static 定位 */
    width: 500px;
    height: 300px;
    border: 2px solid #666;
  }
  .child {
    position: absolute;
    top: 50%;          /* 定位到父容器 50% 位置 */
    left: 50%;
    transform: translate(-50%, -50%);  /* 反向偏移自身宽高的 50% */
    width: 100px;
    height: 100px;
    background: #ff6b6b;
  }

显示效果

实现元素叠加效果（需配合z-index控制层级）

4.固定定位

‌一、基本特性‌

‌相对于视口定位‌
元素的位置由 top, right, bottom, left 属性确定，定位基准是浏览器的可视区域（视口），而非父元素或页面内容。

.fixed-element {
  position: fixed;
  top: 20px;
  left: 30px;
}

‌脱离文档流‌
- 元素会脱离正常文档流，不再占据原有空间。
- 周围元素会重新排列，可能会造成内容遮挡，需通过 margin 或 padding 调整布局。
‌不随页面滚动移动‌
即使页面上下或左右滚动，元素始终固定在设定位置，适合需要始终可见的组件（如导航栏、返回顶部按钮）。

‌二、常见应用场景‌

‌固定导航栏或页眉/页脚

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 确保置于其他内容上方 */
}

2.悬浮按钮或广告

3.‌模态框（Modal）

‌三、注意事项‌

‌性能影响‌
- 频繁滚动时，过多的 fixed 元素可能导致重绘（repaint）性能问题。
- 优化方法：为 fixed 元素添加 will-change: transform; 或启用 GPU 加速。
‌移动端兼容性‌
- 部分移动浏览器在软键盘弹出或视口缩放时，可能错误计算 fixed 元素的位置。
- 解决方案：改用 position: absolute 或通过 JavaScript 动态调整位置。
‌祖先元素的 transform 影响‌
- 若祖先元素设置了 transform, filter, 或 perspective，某些浏览器会以该祖先为基准定位（而非视口）。
- 需检查层级关系，避免意外定位偏移。
‌内容遮挡处理‌
- 例如，固定导航栏可能遮挡页面内容。可通过为内容区域添加与导航栏高度相同的 margin-top 解决：

.content {
  margin-top: 60px; /* 导航栏高度 */
}

‌四、对比其他定位方式‌

定位方式	基准点	是否脱离文档流	滚动时行为
`static`（默认）	正常文档流	否	随内容滚动
`relative`	自身原始位置	否	随内容滚动
`absolute`	最近的定位祖先元素	是	随祖先内容滚动
`fixed`	视口（viewport）	是	固定不动
`sticky`	视口和父容器	否	滚动到阈值后固定