如何固定一个元素在 flexbox 中的位置？

如何解决如何固定一个元素在 flexbox 中的位置？

我有 2 个盒子：面板和侧边栏，在 flexBox 中，带有 flex-direction: row 和 justify-content: space-between 我能够将它们并排水平对齐，中间有间隙。

现在我想修复右侧的侧边栏位置，即向下滚动时，侧边栏应始终保持在屏幕顶部，无论面板的位置如何。我怎样才能用 CSS 做到这一点？

此处的工作示例：https://codesandbox.io/s/gallant-saha-zgmnw

代码在这里：

App.js：

import React from "react";
import "./App.scss";
import Panel from "./Panel";
import Sidebar from "./Sidebar";

export default function App() {
  return (
    <div className="App">
      <Panel />
      <Sidebar />
    </div>
  );
}

App.scss：

.App {
  width: 1100px;
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

Panel.js：

import React from "react";
import "./Panel.scss";

const Panel = () => {
  return (
    <>
      <div className="panel">The main panel</div>
    </>
  );
};

export default Panel;

Sidebar.js：

import React from "react";
import "./Sidebar.scss";

const Sidebar = () => {
  return (
    <>
      <div className="sidebar">The sidebar</div>
    </>
  );
};

export default Sidebar;

解决方法

我修改了你的侧边栏 css。 我使用了位置固定，因为这将使侧边栏固定在视口中，以便您滚动时它会保持静态。

.sidebar {
  position: fixed;            /* add this */
  width: 200px;
  height: 200px;
  text-align: center;
  border: 1px black solid;
  left: 906px                /* add this */
}

这会产生预期的效果。测试和工作。抱歉，我已经更新了我的答案。

,

将此 css 添加到 .sidebar

position:fixed;
right: 10px;

此外，您还可以添加：

top: -- px

如果你有导航栏。