position: fixed和sticky的区别

用 React + CSS 实现的完整示例。

---

 position: fixed和sticky

App.jsx

import React from "react";
import "./styles.css";function App() {return (<div className="app">{/* 固定在页面顶部 */}<div className="fixed-header">🚀 我是 fixed 的导航栏</div><div className="spacer" /><div className="content"><p>下面是 sticky 示例区域：</p><div className="sticky-container"><div className="sticky-header">📌 我是 sticky 的标题</div><div className="box">内容块 1</div><div className="box">内容块 2</div><div className="box">内容块 3</div></div><p>继续往下滚动，观察 sticky 的表现。</p></div></div>);
}export default App;

---

styles.css

body, html {margin: 0;padding: 0;font-family: sans-serif;
}.app {position: relative;
}/* fixed 元素 */
.fixed-header {position: fixed;top: 0;left: 0;width: 100%;height: 50px;background-color: #ff5252;color: white;line-height: 50px;text-align: center;z-index: 1000;
}/* 避免被 fixed 元素遮挡 */
.spacer {height: 60px;
}/* 页面主要内容 */
.content {padding: 0 20px;
}/* sticky 父容器 */
.sticky-container {margin-top: 20px;height: 500px;overflow-y: auto;background: #f9f9f9;border: 2px solid #ccc;padding: 10px;
}/* sticky 元素 */
.sticky-header {position: sticky;top: 0;background: #4caf50;color: white;padding: 10px;font-weight: bold;
}/* 内容块 */
.box {height: 200px;background: #e0e0e0;margin: 10px 0;text-align: center;line-height: 200px;font-size: 20px;
}

• .fixed-header 是固定在页面顶部的，无论怎么滚动都在上面；

• .sticky-header 会在滚动到视口顶部时“吸住”顶部，直到它的父容器滚动结束。

---

属 性	position: fixed	position: sticky
相对谁定位？	相对 浏览器窗口 定位（viewport）	相对 最近的可滚动祖先容器 定位
会不会滚动？	❌ 不会滚动，一直固定在视口的某个位置	✅ 在一定范围内滚动，滚动到一定位置后“粘住”
常用场景	固定导航栏、浮动按钮、客服按钮	页面内导航栏、表头固定、某区域内的锚点导航等

补充overflow

overflow-y: auto; 是 CSS 中控制 垂直方向（y轴）内容溢出时是否显示滚动条的属性设置

当内容高度超出容器时，自动显示垂直滚动条；如果没有溢出，就不显示。

---

🔍 示例解释：

.my-container {height: 200px;overflow-y: auto;
}

如果你这个 .my-container 里放了很多内容超过 200px 的高度，就会在右侧自动出现滚动条，让你可以上下滚动内容。

---

📌 类似属性还有：

属性值	含义说明
visible	默认值，内容溢出会显示出来（不裁切、不滚动）
hidden	内容溢出会被隐藏
scroll	无论是否溢出，总是显示滚动条
auto	内容超出时才出现滚动条

---

📘 补充：

• overflow-y 只控制垂直方向；

• overflow-x 控制水平方向；

• overflow 同时控制 x 和 y 两个方向。

---