React：react-router，CSS的三种定位

React-router 是一个用于 React 应用程序的路由库，它允许你创建单页应用程序，其中不同的页面可以通过URL的不同进行区分。

CSS 的三种定位方式：

1. 静态定位（Static Positioning）：这是所有元素默认的定位方式，不需要使用 CSS 定位属性。
2. 相对定位（Relative Positioning）：相对定位是相对于元素在文档中的原始位置进行定位。使用 CSS 属性 position: relative; 并通过 top, bottom, left, right 属性进行定位。
3. 绝对定位（Absolute Positioning）：绝对定位是相对于最近的非静态定位的祖先元素进行定位。使用 CSS 属性 position: absolute; 并通过 top, bottom, left, right 属性进行定位。
4. 固定定位（Fixed Positioning）：固定定位总是相对于视口进行定位，并且不会因为页面滚动而移动。使用 CSS 属性 position: fixed; 并通过 top, bottom, left, right 属性进行定位。
5. 粘性定位（Sticky Positioning）：粘性定位是相对定位和固定定位的混合。它在达到一定阈值前表现为相对定位，之后表现为固定定位。使用 CSS 属性 position: sticky; 并通过 top, bottom, left, right 属性进行定位。

以下是一个简单的例子，展示了如何在React中使用react-router以及CSS的相对定位：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 
const Home = () => (
  <div style={{ position: 'relative', top: 20 }}>
    <Link to="/about">About</Link>
  </div>
);
 
const About = () => (
  <div style={{ position: 'relative', top: 40 }}>
    <Link to="/">Home</Link>
  </div>
);
 
const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);
 
export default App;

在这个例子中，我们定义了两个组件 Home 和 About，它们使用了CSS的相对定位来设置它们内部链接的 top 属性，从而改变它们相对于其正常位置的位置。然后，我们通过 react-router-dom 中的 Router 和 Route 组件定义了应用程序的路由。