Javascript 如何确定flexbox中一个元素的位置？ 我有2个方框：面板和侧边栏，在Flasbox中，有 Flex方向：行和对齐内容：之间的空间，我可以水平地对齐它们与中间的间隙。

现在我想确定右边的边栏位置，即当向下滚动时，边栏应该始终位于屏幕顶部，而不管面板的位置如何。我如何使用CSS实现它

此处的工作示例：

代码如下：

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>
  );
}

Panel.js：

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

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

export default Panel;

从“React”导入React；
导入“/Panel.scss”；
常数面板=（）=>{
返回(
主面板
);
};
导出默认面板；

Sidebar.js：

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

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

export default Sidebar;

从“React”导入React；
导入“/Sidebar.scss”；
常量边栏=（）=>{
返回(
边栏
);
};
导出默认边栏；

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

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

---

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

我修改了你的siderbar 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

---

如果您有导航栏。

请将此css添加到.sidebar

position:fixed;
right: 10px;

此外，您还可以添加：

top: -- px

---

如果您有导航栏。

使用绝对或sticky@DCR这是否适用于家长

display:flex

？display:flex；位置：相对位置；然后在元素中，您要放置使用位置：absoluteuse absolute或sticky@DCR这是否适用于家长

display:flex

？display:flex；位置：相对位置；然后在您的元素中，您要放置使用位置：Absolute侧边栏确实粘贴到屏幕顶部，但

right:0px

使其粘贴到页面右侧，这与原始设计不同侧边栏确实粘贴到屏幕顶部，但

right:0px

使其粘贴到页面右侧，这和最初的设计不一样